Một thanh điều hướng tiêu chuẩn được tạo với lớp .navbar, theo sau là lớp thu gọn đáp ứng. .navbar-expand-xxl|xl|lg|md|sm (xếp thanh điều hướng theo chiều dọc trên màn hình xxlarge, cực lớn, lớn, trung bình hoặc nhỏ)
Để thêm liên kết bên trong thanh điều hướng, hãy sử dụng một
- phần tử (hoặc một
- các phần tử có lớp .nav-item theo sau là phần tử có lớp .nav-link
Thí dụ
Liên kết 1
Liên kết 2
Liên kết 3
Tự mình thử »Thanh điều hướng dọc
Xóa lớp .navbar-expand-* để tạo thanh điều hướng luôn nằm dọc
Thí dụ
...
Tự mình thử »Căn giữa thanh điều hướng
Thêm lớp .justify-content-center vào giữa thanh điều hướng
Thí dụ
...
Tự mình thử »Thanh điều hướng màu
Sử dụng bất kỳ lớp .bg-color nào để thay đổi màu nền của thanh điều hướng (.bg-primary, .navbar-expand-xxl|xl|lg|md|sm0, .navbar-expand-xxl|xl|lg|md|sm1, .navbar-expand-xxl|xl|lg|md|sm2, .navbar-expand-xxl|xl|lg|md|sm3, .navbar-expand-xxl|xl|lg|md|sm4, .navbar-expand-xxl|xl|lg|md|sm5 và .navbar-expand-xxl|xl|lg|md|sm6)
Mẹo. Thêm màu văn bản trắng vào tất cả các liên kết trong thanh điều hướng với lớp .navbar-expand-xxl|xl|lg|md|sm7 hoặc sử dụng lớp .navbar-expand-xxl|xl|lg|md|sm8 để thêm màu văn bản màu đen
Thí dụ
Đang hoạt động
Liên kết
Liên kết
Đã tắt
...
...Try it Yourself »Trạng thái hoạt động/bị vô hiệu hóa. Thêm lớp .navbar-expand-xxl|xl|lg|md|sm9 vào phần tử để đánh dấu liên kết hiện tại hoặc lớp class="navbar-nav"1 để chỉ ra rằng liên kết không thể nhấp được
Biểu tượng thương hiệu
Lớp class="navbar-nav"2 được sử dụng để làm nổi bật tên thương hiệu/logo/dự án trên trang của bạn
Thí dụ
Biểu trưng
Try it Yourself »Khi sử dụng lớp class="navbar-nav"2 với hình ảnh, Bootstrap 5 sẽ tự động tạo kiểu cho hình ảnh để khớp với thanh điều hướng theo chiều dọc
Thí dụ
Try it Yourself »Văn bản thanh điều hướng
Sử dụng lớp class="navbar-nav"4 để căn chỉnh theo chiều dọc bất kỳ phần tử nào bên trong thanh điều hướng không phải là liên kết (đảm bảo phần đệm và màu văn bản phù hợp)
Thí dụ
Văn bản thanh điều hướng
Try it Yourself »Rất thường xuyên, đặc biệt là trên màn hình nhỏ, bạn muốn ẩn các liên kết điều hướng và thay thế chúng bằng một nút sẽ hiển thị chúng khi nhấp vào
Để tạo thanh điều hướng có thể thu gọn, hãy sử dụng nút có class="navbar-nav"5. Sau đó bọc nội dung thanh điều hướng (liên kết, v.v.) bên trong một
phần tử có class="navbar-nav"6, theo sau là id khớp với class="navbar-nav"7 của nút. "mục tiêu"
Thí dụ
Biểu trưng
Liên kết
Liên kết
Liên kết
Try it Yourself »Mẹo. Bạn cũng có thể xóa lớp class="navbar-nav"8 để LUÔN LUÔN ẩn liên kết thanh điều hướng và hiển thị nút chuyển đổi
Thanh điều hướng với danh sách thả xuống
Thanh điều hướng cũng có thể giữ menu thả xuống
Thí dụ
Menu thả xuống
- liên kết
- liên kết khác
- Liên kết thứ ba
Tự mình thử »
Liên kết
Liên kết
Liên kết
) với class="navbar-nav". Sau đó thêm
Các biểu mẫu và nút trên thanh điều hướng
Bạn cũng có thể bao gồm các biểu mẫu bên trong thanh điều hướng
Thí dụ
Biểu trưng
Search
Try it Yourself »
Thanh điều hướng cố định
Thanh điều hướng cũng có thể được cố định ở đầu hoặc cuối trang
Thanh điều hướng cố định vẫn hiển thị ở một vị trí cố định (trên cùng hoặc dưới cùng) độc lập với cuộn trang
Lớp class="navbar-nav"9 làm cho thanh điều hướng cố định ở trên cùng
Thí dụ
...
Tự mình thử »
Sử dụng lớp .nav-item0 để đặt thanh điều hướng ở cuối trang
Thí dụ
...
Tự mình thử »
Sử dụng lớp .nav-item1 để làm cho thanh điều hướng cố định/ở đầu trang khi bạn cuộn qua nó. Ghi chú. Lớp này không hoạt động trong IE11 trở về trước (sẽ coi nó là .nav-item2)