phần tử (hoặc một) với class="navbar-nav". Sau đó thêm
- các phần tử có lớp
.nav-item theo sau là phần tử .nav-linkThí 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ử 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
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
Liên kết
Liên kết
Liên kết
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)
Làm cách nào để căn giữa các phần tử thanh điều hướng trong Bootstrap?
Sử dụng CSS. Trong phương pháp này, chúng tôi sẽ sử dụng một lớp do người dùng định nghĩa để căn chỉnh các mục vào trung tâm . Sau đó, chúng tôi sẽ sử dụng CSS để căn chỉnh các mục vào trung tâm. Chúng ta đã định nghĩa lớp navbar-centre.
Làm cách nào để căn chỉnh các mục trên thanh điều hướng trong Bootstrap 5?
Các mục trên thanh điều hướng có thể được căn chỉnh bằng tiện ích flex. Sử dụng. lớp justify-content-end trên menu thu gọn để căn chỉnh các mục ở bên phải .
Làm cách nào để căn chỉnh các mục trong thanh điều hướng Bootstrap?
lớp ml-auto trong Bootstrap có thể được sử dụng để căn chỉnh các mục trên thanh điều hướng sang bên phải . Các. lớp ml-auto tự động căn chỉnh các phần tử sang phải.
