Bài 18: Navigation trong bootstrap 4

0
183

Xin chào các bạn, bài hôm nay mình sẽ hướng dẫn các bạn tìm hiểu về 1 phần khá quan trọng trong Bootstrap 4, đó là Navigation hay còn được viết tắt là navbar. Chúng ta sẽ bắt đầu đi tìm hiểu nhé!

Navigation cơ bản trong Bootstrap 4

Ở phần này, mình sẽ hướng dẫn các bạn các khai báo navbar cơ bản mà Bootstrap 4 hỗ trợ sẵn, đó là tạo ra 1 thanh Menu ngang có hỗ trợ Reponsive trên các thiết bị.

Đầu tiên, tạo thanh Menu ngang, các bạn cần khai báo cho thẻ <nav> class .navbar, reponsive sử dụng class .navbar-expand-xl|lg|md|sm cho thẻ <nav> tùy thiết bị hiển thị, bên trong các thẻ con <ul>, <li> hay <a> cũng sẽ có các class con hỗ trợ, các class con hỗ trợ Navigation như sau:

  • navbar-nav: định dạng trang trí cho phần menu ul
  • .nav-item: định dạng cho thẻ li
  • .nav-link: định dạng cho thẻ a
  • .navbar-toggle: định dạng hiệu ứng menu đổ xuống

Ví dụ để các bạn hiểu cách sử dụng, nói mãi lý thuyết rất khó hình dung đúng không nào!

Code HTML nhé:

Hiển thị kết quả như sau:

Menu dọc với Navigation trong Bootstrap 4

Tương tự như phần trên, nhưng nếu làm Menu dọc thì các bạn nhớ bỏ class .navbar-expand-xl|lg|md|sm đi là sẽ thu được Menu dọc nhé!

Ví dụ như sau:

Căn vị trí cho Navbar trong Bootstrap 4

Bình thường, các Navbar sẽ hiển thị mặc định bên trái, để Navbar hiển thị ở giữa màn hình, các bạn sử dụng thêm class .justify-content-center cho thẻ <nav>, như sau:

Màu sắc Navbar

Trong Bootstrap quy định rất nhiều kiểu màu sắc cho các thành phần, Navbar cũng vậy, các class các bạn có thể sử dụng để có các màu sắc cho Navbar như sau (sử dụng cho thẻ nav):

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Lưu ý: Để có Navbar với chữ trắng cho các links các bạn sử dụng thêm class .navbar-dark, ngược lại sử dụng class .navbar-light cho chữ đen.

Ví dụ:

Ví dụ trên, có thể thêm class .active cho thẻ <a> để hiển thị link hiện tại, hoặc nếu muốn vô hiệu hóa link nào thì sử dụng class .disabled cho link đó.

Thêm Brand/Logo cho Navbar trong Bootstrap 4

Class .navbar-brand giúp các bạn có thể thêm các logo hay tên menu, … cho trang đó, sử dụng trong thẻ <a> nhé.

Ví dụ:

Khi các bạn sử dụng class này để thêm hình ảnh, Bootstrap 4 sẽ tự động style trang trí cho hình ảnh, thẻ hình ảnh <img> sử dụng bên trong thẻ <a>, như sau:

Xây dựng Menu Reponsive với Navigation trong Bootstrap 4

Bình thường, trên các màn hình nhỏ như máy tính bảng, điện thoại di động, các bạn sẽ muốn ẩn các link Menu điều hướng danh mục và thay thế chúng bằng 1 nút để khi kích vào mới hiển thị danh mục lên. Thì để tạo được Menu dạng đó, Bootstrap 4 hỗ trợ cho nút button các thuộc tính như sau:

  • class=”navbar-toggler”
  • data-toggle=”collapse”
  • data-target=”#thetarget

Còn ở trong khối div Menu thì sử dụng class="collapse navbar-collapse".

Lưu ý: khối div Menu có id chính là #thetarget trong data-target.

Ví dụ như sau:

Kết luận

Như vậy, mình đã hướng dẫn xong cho các bạn về Navigation hay Navbar trong Bootstrap 4. Các bạn có thể áp dụng vào làm rất nhiều vấn đề trên website, đặc biệt là trong các Menu. Hẹn gặp lại các bạn trong các bài viết tiếp theo.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây