Đây cũng đang là phiên bản 1.0, nếu trong quá trình sử dụng phát hiện lỗi gì vui lòng để lại bình luận bằng công cụ facebook-comment bên dưới. [Lưu ý là mình sẽ không thảo luận qua Live chat nhé].
Đây là clip số 19: Nav - Navigation - menu
Nav giúp tạo menu đẹp hơn, dễ hơn và nhanh hơn.
Ví dụ, class=“nav nav-tabs”.
- Item1
- Item2
- Item3
- Item1
- Item2
- Item3
- Item1
- Item2
- Item3
- Content
- Contact
- About
- Content
- Contact
- About
- Content
- Contact
- About
- Content
- Contact
- About
- Content
- Contact
- About
Ví dụ, class=“nav nav-pills”
Ví dụ, menu dọc: class = “nav nav-tabs nav-stacked”. Để làm nổi bật phần nội dung: class=“well”.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ex sunt, alias ea excepturi repellendus voluptatum nihil praesentium porro temporibus ad, ab quos autem magnam eum optio possimus dolore incidunt natus aliquid atque dolorem repellat pariatur ut ullam. Deleniti assumenda, exercitationem architecto sed ut perferendis, non expedita obcaecati. Doloribus, nam.
Đây là clip số 20: Navbar – thanh menu
Nav để tạo menu, navbar để tạo thanh menu.
Sử dụng thẻ nav của HTML5 kết hợp với các class của Bootstrap để tạo navbar.
Thanh menu màu xám:
Thanh menu màu đen:
Để căn giữa một phần tử, đưa phần tử đó vào trong
Trong Sublime Text, sử dụng phím tắt “ctrl+shift+D” để copy/paste một dòng.
Thanh menu gồm hai phần: navbar-header và navbar-collapse, mục đích là để khi thu nhỏ màn hình thì phần navbar-header được giữ nguyên, còn phần navbar-collapse thì bị thu lại [ẩn đi], ví dụ:
Cong ty ABC
Toggle navigation
Để căn phải menu, dùng class=“navbar-right”
Để ẩn đi menu khi màn hình bị thu nhỏ, dùng class=“collapse”.
Để thêm nút bấm, khi người dùng bấm vào nút này sẽ hiển thị menu trong phần navbar-header, sử dụng đoạn mã sau:
Toggle navigation
Theo đó, sr là viết tắt của screen reader là trình đọc màn hình. Vậy, đoạn mã Toggle navigation để hỗ trợ cho trình đọc màn hình, nội dung của nó sẽ không được hiển thị khi xem ở chế độ bình thường.
Đây là clip số 21: Navbar – thanh menu [tiếp theo]
- Navbar có độ rộng chiếm hết màn hình, di chuyển cùng với phần nội dung
- Navbar có độ rộng chiếm hết màn hình, luôn cố định ở phía trên khi di chuyển phần nội dung
- Navbar có độ rộng chiếm hết màn hình, luôn cố định ở phía dưới khi di chuyển phần nội dung
Nếu không bao navbar bằng container, navbar sẽ có độ rộng đúng bằng cửa sổ trình duyệt.
Sử dụng class=“navbar-static-top” để bỏ đi phần bo tròn hai đầu của thanh menu.
Ví dụ, navbar có độ rộng chiếm hết màn hình, di chuyển cùng với phần nội dung
Cong ty ABC
Toggle navigation
Bao phần nội dung bên trong của navbar bằng container để thực hiện căn giữa phần nội dung.
Sử dụng class=“navbar-fixed-top” để bỏ đi phần bo tròn hai đầu của thanh menu, đồng thời cố định thanh menu luôn ở trên đầu trang. Tuy nhiên, khi đó menu cũng sẽ che mất một phần nội dung của trang web. Vì vậy cần phải thiết lập padding-top cho phần nội dung [padding-top cho thẻ body].
Cong ty ABC
Toggle navigation
Lorem ipsum dolor sit amet,
consectetur adipisicing elit.
Dicta dignissimos hic ex. Obcaecati magnam quae rerum nemo, sint sequi! Nostrum, architecto culpa cumque quaerat? Laborum debitis dolores molestiae distinctio sit!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta dignissimos hic ex. Obcaecati magnam quae rerum nemo, sint sequi! Nostrum, architecto culpa cumque quaerat? Laborum debitis dolores molestiae distinctio sit!
Sử dụng class=“navbar-fixed-bottom” để bỏ đi phần bo tròn hai đầu của thanh menu, đồng thời cố định thanh menu luôn ở phía cuối trang.
Đoạn mã sau sẽ chèn một form vào navbar:
Cong ty ABC
Toggle navigation
Signup
Có thể thay và bằng thẻ Cong ty ABC
Toggle navigation
Signup
Login
Sử dụng class=“navbar-btn” để căn đều trên-dưới cho một nút trong navbar. Ví dụ: Signup
Giảm tầm quan trọng của Login so với Signup. Ví dụ: Login