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-center
cho 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.
- Posted by baobinhnet
- 2020-06-26 11:45:43