[BOOTSTRAP] Bài 10: NAV và NAVBAR trong bootstrap đầy đủ nhất

Hôm nay chúng ta sẽ nghiên cứu và thực hành việc sử dụng nav và navbar trong việc xây dựng các thanh điều hướng trong website cực kỳ đơn giản bằng bootstrap.

Navs menu

  • Được dùng để tạo một thanh menu ngang đơn giản
  • Tạo một thẻ ul sau đó thêm lớp  nav để bắt đầu tạo thanh, tiếp theo thêm lớp   nav-item  vào thẻ li để tạo các nút Bottons, cuối cùng thêm lớp  nav-link vào a để tạo đường dẫn, href=”#” dùng để ghi id dẫn đến đường link.
  • Ngoài ra còn lớp   disabled  dùng để vô hiệu hóa nút ấn botton

Sử dụng chúng như sau:

Căn lề Nav (Aligned Nav): Bootstrap cung cấp cho một vài lớp dùng để căn lền Nav:

Responsive Navs:

Thanh menu dọc: Mặc định của Nav Bootstrap là thanh menu ngang, nhưng có thể chuyển thành thanh menu dọc bằng cách thêm lớp   flex-column.

Sử dụng chúng như sau:

 

Nếu muốn có một thanh menu ngang, có thể chuyển sang khẳng đứng khi chiều rộng màn hình nhỏ hơn, có thể kết hợp lớp  flex-column với 1 số lớp sau:

Pills

Pill rất giống với Tab về cách hoạt động ngoại trừ sự khác biệt về mặt giao diện. Nav-item của Nav(Pill) ở trạng thái active trông giống như một button.

 

Tabs

Dùng để chuyển menu điều hướng thành tab điều hướng với lớp  nav-tab . Thêm lớp active vào liên kết để làm nổi bật cho nav-item.

Sử dụng lớp nav-justified  vào Tabs/Pills chia đều các Nav-item bằng nhau

 

Dropdown(Thanh thả xuống)

Sử dụng trên Tabs/Pills để tạo thanh thả xuống trong nav-item. 

Sử dụng Dropdown trong Tab

Dropdown trong Pill cũng tương tự.

Tab động

Để tạo các tab động, chúng ta thêm thuộc tính data-toggle=”tab” vào mỗi liên kết. Sau đó, tạo 1 lớp .tab-pane với 1 id duy nhất cho mỗi tab và bao chúng bên trong 1 phần tử div với lớp .tab-content. 

Nếu bạn muốn các tab hiển thị dần biến mất hoặc dần hiện ra thì thêm lớp .fade trong lớp .tab-pane.

Sử dụng như sau:

 

Pill động cũng tương tự, thêm thuộc tính data-toggle=”pill” dành cho các pill động

Thanh điều hướng (Navbar)

Thanh điều hướng:

  • Là một phần giao diện của giao diện người dùng, giúp cho người dùng có thể chuyển tới các trang(page) khác nhau trong website
  • Thường là menu chính được đặt ở đầu trang, đóng vai trò quan trọng về mặt cấu trúc của 1 trang web

Với Bootstrap, một thanh điều hướng cơ bản có thể mở rộng hoặc thu gọn, tùy thuộc vào kích thước màn hình, có thể biết đổi thanh công cụ từ ngang thành dọc nếu độ rộng màn hình nhỏ

Thanh điều hướng cơ bản

Thanh điều hướng được tạo bằng phần tử nav với 2 lớp  navbar và navbar-default.

Các thanh công cụ tiêu chuẩn được tạo với lớp navbar và lớp  navbar-expand-xl / lg / md / sm để chỉ rõ với những độ phân rộng màn hình nào thì thanh công cụ đó mở rộng, ngược lại thì nó thu gọn.

Nếu không sử dụng lớp navbar-expand-xl / lg / md / sm sẽ luôn thẳng đứng với mọi kích thước màn hình.

Sử dụng một yếu tố ulvới class="navbar-nav". Sau đó thêm các phần tử  li với một lớp .nav-item  theo sau là một phần tử a với một lớp .nav-link

Đây là cấu trúc minh họa của 1 navbar cơ bản:

Thanh điều hướng dọc

Xóa lớp navbar-expand-xl / lg / md / sm để được một thanh điều hướng dọc.

Cố định thanh điều hướng:

  • Navbar-fixed-top: Cố định thanh điều hướng ở trên
  • Narbar-fixed-bottom: Cố định thanh điều hướng ở dưới

Trung tâm thanh:

Thêm lớp .justify-content-center để chuyển item vào trung tâm thanh điều hướng

Ví dụ sau đây sẽ căn giữa thanh điều hướng trên màn hình trung bình, lớn và cực lớn. Trên màn hình nhỏ, nó sẽ được hiển thị theo chiều dọc và căn trái

 

Thanh màu

Sử dụng lớp .bg-color để thay đổi màu nền của thanh điều hướng ( .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark và .bg-light)

Thêm màu văn bản màu trắng vào tất cả các liên kết trong thanh điều hướng với lớp.navbar-dark hoặc sử dụng lớp .navbar-light để thêm màu văn bản màu đen.

Brand/Logo: một trong các thành phần không thể thiếu của một Navbar là một Brand (Nhãn hiệu), là nơi đặt một Logo hoặc một cái tên liên quan đến trực tiếp Website của bạn.

Lớp Narbar-brand sử dụng để làm Brand/Logo/Tên dự án thương hiệu của trang.

Sử dụng lớp Navbar-brand để dùng hình ảnh làm Brand/Logo.

Thêm thuộc tính: a

Thu gọn thanh điều hướng:

Thông thường trên các thiết bị với màn hình nhỏ, các website thường chọn thu gọn thanh điều hướng thành một botton, khi ấn vào thanh botton đó thanh điều hướng sẽ hiển thị thẳng đứng

Để tạo một thanh thu gọn: sử dụng nút với lớp  class=”navbar-toggler”, data-toggle=”collapse”  and   data-target=”thetarget”  sau đó bạn vào

với lớp  class=”collapse narbar-collapse” sau đó tạo id khớp với nút thetarget.

 

Chúng ta thấy nút button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”#thetarget” dùng để tạo nút collapse (thu giãn) với icon là 3 dấu vạch ngang, nút này sẽ xuất hiện ở thiết bị có màn hình hẹp (như di động) và khi nhấn vào nút này, nội dung thanh điều hướng sẽ được hiển thị.

Có thể xóa lớp  navbar-extend-md để luôn ẩn thanh điều hướng và hiể thị nút thu gọn (toggle)

Navbar: Thanh điều hướng thả xuống.

Cũng tương tự như  Tab với Dropdown. Bằng cách thêm lớp dropdown

Thêm biểu mẫu và nút trong Navbar.

 Thêm một thẻ form với lớp class=”form-inline”  trong gồm các nhóm đầu vào input và bottons cạnh nhau: 

Bạn cũng có thể sử dụng các lớp đầu vào khác, chẳng hạn như .input-group-prependhoặc .input-group-appendđể đính kèm một biểu tượng hoặc văn bản trợ giúp bên cạnh trường nhập. 

Thanh văn bản:

Sử dụng lớp.navbar-text để thêm một thành phần trên thanh điều hướng menu mà không phải là link dẫn.

Sử dụng lớp.navbar-text để thêm một thành phần trên thanh điều hướng menu mà không phải là link dẫn.


Các nội dung liên quan:

Tháng 04 - Codecamp mở lớp lập trình web chuyên nghiệp bằng Laravel

Đây là khoá học nâng cao học về Laravel - một framework php hàng đầu thế giới. Nếu bạn mong muốn phát triển dự án chuyên nghiệp, bảo mật, nhu cầu tuyển dụng cao thì tham gia khoá học này.

Tháng 04 - Codecamp mở lớp học lập trình Web Php Từ Cơ Bản Đến Nâng Cao Theo MVC OOP

Mastering PHP là chương trình được biên soạn kỹ lưỡng từng bước một giúp bất kỳ ai có thể làm chủ được việc xây dựng hệ thống website sau thời gian ngắn ngay cả khi chưa có kiến thức nền tảng. Khoá học đầy đủ nội dung và được hướng dẫn tỉ mỉ, chi tiết, cầm tay chỉ code đến khi code được thì thôi.

Top 19 website học lập trình miễn phí cực chất lượng

Những kênh dạy lập trình căn bản bằng Tiếng Việt trên đây là những kênh thông tin tuyệt vời giúp các học viên dù là người mới hay đã có kinh nghiệm lập trình có thể lựa chọn để làm một kênh thông tin tham khảo thêm những kiến thức lập trình phong phú khi lập trình trang web, ứng dụng hoặc tạo lập dự án.