Bài 17: Navs menu trong Bootstrap 4

0
1155

Xin chào các bạn, hôm nay mình sẽ hướng dẫn các bạn về Navs làm menu trong Bootstrap. Nghe đến Navs là các bạn đã thấy khá quen rồi, chức năng chính của nó sẽ giúp chúng ta tạo ra các menu đẹp mắt và ứng dụng vào website dễ dàng hơn. Navs có rất nhiều kiểu và mình sẽ hướng dẫn các bạn tìm hiểu cách sử dụng nó thông qua từng dạng Menu 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:

Hiển thị 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ụ:

Kết quả:

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:

Ví dụ:

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:

Hiển thị kết quả:

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

Bài viết này cũng khá ngắn nhưng nó là nền tảng để các bạn có thể học tốt các phần sau hơn, ở bài tiếp theo chúng ta sẽ lại tiếp tục tìm hiểu về một components khác để tạo ra các kiểu menu bắt mắt hơn.

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