navbar là thanh điều hướng ngang chính, thường được đặt ở đầu trang, navbar được thiết kế với các tính năng đáp ứng, bao gồm biểu tượng trang web, nhãn thương hiệu, menu thả xuống, nút bấm, v.v. p>
navbar được tạo từ .navbar kết hợp với .navbar-expand {-sm | -md | -lg | -xl} cộng với .navbar-dark hoặc .navbar-light và cuối cùng là background .bg- * hoặc thiết lập ánh sáng của riêng bạn cài đặt Nền với màu tùy chỉnh. navbar sử dụng công nghệ flexbox, vì vậy trước tiên hãy tập trung vào phần này: flexbox trong bootstrap
Về cơ bản, việc xây dựng một thanh điều hướng html sẽ giống như sau:
Bạn đang xem: Navbar-expand-lg là gì
.navbar cơ bản như vậy bắt đầu với phần tử gốc .navbar và sau đó kết hợp với các phần tử định dạng khác, ví dụ:
- .navbar-expand – {- sm | -md | -lg | -xl} Định dạng này cho biết từ màn hình nào thanh điều hướng sẽ hiển thị tất cả nội dung trở lên, nó sẽ thu gọn các con khác và xuất hiện danh sách nút Click. navbar-toggler Bấm để mở rộng. Trong ví dụ trên, .navbar-expand-lg được sử dụng nên màn hình dưới kiểu xl (lớn) sẽ bị đóng. Thu nhỏ cửa sổ trình duyệt để kiểm tra
- Tùy chọn nền cho thanh điều hướng có màu chính (nhấp để kiểm tra) .bg- {chính | phụ | thành công | thông tin | cảnh báo | nguy hiểm | sáng | tối}. Nếu các màu trên không đủ, bạn có thể sử dụng css hoặc css nội tuyến của riêng mình để tùy chỉnh style = “background-color: yourcolor”
- Sử dụng navbar-light và navbar-dark để chọn sáng hoặc tối thanh điều hướng. Về cơ bản, nó sẽ thiết lập màu văn bản, liên kết các phần tử trên thanh điều hướng để nó hiển thị rõ ràng trên các loại sáng và tối
- Để đặt vị trí của thanh điều hướng, ví dụ: bạn có thể sử dụng lớp vị trí. trên cùng cố định,. cố định dưới cùng
Hiển thị Biểu trưng .navbar-thương hiệu phụ phía trên màn hình thương hiệu, luôn hiển thị trên thanh điều hướng, có thể được đặt làm văn bản thương hiệu, liên kết thương hiệu, hình ảnh thương hiệu hoặc liên kết trống + ảnh
p>Phần tử
.navbar-toggler có nút & lt; & amp; lg; đặt lớp .navbar-toggler để tạo nút bật tắt chỉ hoạt động khi màn hình ở dưới .navbar-expand { -sm | -md | -lg | -xl} xuất hiện khi kích thước được đặt, khi được nhấp vào sẽ mở rộng thanh điều hướng menu thả xuống để hiển thị các phần tử bị ẩn. Đặt thuộc tính phần tử này giống như trong mã mẫu ở trên, đảm bảo có thuộc tính data-toggle = “sập” aria-expand = “false” và lưu ý data-target = “# my-nav-bar” aria-control = “my -nav -bar “, trong đó my-nav-bar là id của phần tử chứa nội dung thanh điều hướng (nút, menu, biểu mẫu)
Khu vực hiển thị nội dung thanh điều hướng
Phần còn lại của các phần tử thanh điều hướng sẽ được hiển thị trong phần tử vùng chứa với một id được chỉ định mà .navbar-toggler được liên kết thông qua các thuộc tính data-target và aria-control. Phần tử này cần đặt thuộc tính class = “sập navbar-sập”, hãy xem mã mẫu ở trên
Nội dung cần được thêm vào thanh điều hướng sẽ được chứa trong vùng chứa này và chúng tôi sẽ xem xét một số loại yếu tố bổ sung:
Thêm các mục menu xuất hiện trên thanh điều hướng được tạo từ phần tử .navbar-nav vào menu, phần tử con là .nav-item chứa liên kết từ lớp .nav-link, có cấu trúc như sau:
p>
Nếu một mục đang hoạt động, hãy thêm .active, nếu bạn muốn tắt nó, hãy thêm .nav-link class.disabled
Thêm vào menu thả xuống .nav-item cũng có thể được đặt làm mục menu thả xuống, ví dụ: thêm cấu trúc sau
