FullStack Academy

Navs menu trong Bootstrap 4

Chào các bạn, khi thiết kế website, bạn sẽ cần phải làm các menu điều hướng để hỗ trợ người dùng di chuyển dễ dàng giữa các page. Navs trong bootstrap 4 hỗ trợ rất tốt công việc này. Trong bài học này, chúng tay cùng nhau tìm hiểu những cách sử dụng khác nhau của Navs nhé. 

Menu nằm ngang với NAV

Đầu tiên, mình sẽ sử dụng các thẻ ul, li để xây dựng cấu trúc HTML cho phần này, như sau:


 

Như vậy để có thể tao ra menu giống như hình trên thì ngay thẻ ul , các bạn khai báo cho nó class cha là nav và phía sau nó sẽ là các class con bổ trợ, thẻ li sử dụng class .nav-item và thẻ link a sử dụng class .nav-link.

Menu căn chỉnh vị trí với Nav

Bình thường, khi xây dựng Menu thì nó thường được định vị ở góc bên trái màn hình, bây giờ, các bạn muốn Menu nằm ở các vị trí khác như bên phải, trung tâm thì Navs trong Bootstrap cũng hỗ trợ các class làm công việc đó.

Cụ thể, để căn Menu ra giữa, các bạn sử dụng class .justify-content-centercho thẻ <ul>, và nếu muốn Menu nằm phía bên phải, chúng ta sử dụng class .justify-content-end cũng cho thẻ <ul>.

Ví dụ:



 

Menu dọc trong Nav Bootstrap 4

Để xây dựng Menu dọc trong Bootstrap 4, chúng ta sử dụng class .flex-column cho thẻ <ul>, như sau:



 

Làm Tab Menu trong Bootstrap 4

Làm Menu Tab các bạn sử dụng class .nav-tabs cho thẻ <ul> và muốn nổi bật tab thì sử dụng class .active, như sau:



 

Như vậy các bạn có thể dễ dàng nhân ra rằng là sau khi chúng ta thêm class con là nav-tabs vào thì danh sách menu đã hiển thị theo chiều ngang và phía dưới có thể hiện một nét gạch ngang để phân chia ra từng tabs menu rất rõ ràng.

Để có thể làm nổi bật menu đã được click chuột và xác định là người dùng đang ở trang nào thì chắc hẳn các bạn vẫn còn nhớ class active đúng không nào. Ai quên rồi thì vui lòng xem lại các bài cũ nhé.

Thay đổi background active menu navs trong bootstrap 4

Ở phần này thì navs có một class con là nav-pills hỗ trợ như chúng ta việc thay đổi màu nền cho việc active menu.

Ví dụ:



 

KẾT LUẬN

Trong bài viết này, chúng ta đã làm quen với Navs trong bootstrap, đây là một nhóm class khá quan trọng của bootstrap, giúp chúng ta nền tảng để làm việc với các nhóm class bootstrap khác nhằm tạo ra một hệ thống menu navigation tốt hơn. Hẹn gặp lại các bạn trong bài học lần sau.