Navbar là thanh điều hướng chính nằm ngang, thường đặt ở đầu trang, Navbar được thiết kế với tính năng responsive, trong đó chứa các thành phần như biểu tượng của website, nhãn thương hiệu, các menu đổ xuống, các nút bấm ...
NavBar xây dựng từ .navbar kết hợp với .navbar-expand{-sm|-md|-lg|-xl} cộng với thiết lập dạng sáng tối là .navbar-dark hoặc .navbar-light cuối cùng là nền .bg-* hoặc tự thiết lập nền background với màu tùy chọn. Navbar sử dụng kỹ thuật FlexBox nên cũng cần quan tâm đến phần này trước:
FlexBox trong Bootstrap
Cơ bản xây dựng một HTML Navbar sẽ như sau:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Brand-Logo</a>
<button class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#my-nav-bar"
aria-controls="my-nav-bar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="my-nav-bar">
<!--HTML các thành phần trình bày trên Navbar-->
</div>
</nav>
Cơ bản .navbar Như vậy bắt đầu bằng phần tử gốc .navbar sau đó là kết hợp với các phần tử định dạng khác như:
.navbar-expand-{-sm|-md|-lg|-xl}định dạng này chỉ ra bắt đầu từ màn hình nào trở lên Navbar hiện thị tất cả nội dung, con khác nó sẽ thu gọn lại và xuất hiện nut bấm.navbar-togglerđể bấm vào mở rộng. Ở ví dụ trên sử dụng.navbar-expand-lgnên các màn hình dưới loại xl (Lớn) sẽ bị thu lại. Hãy thu nhỏ cửa sổ trình duyệt để kiểm tra- Chọn cho Navbar loại sáng hay tối với
navbar-lightvànavbar-dark. Cơ bản nó sẽ thiết lập màu chữ, link các thành phần trên Navbar sao cho nhìn rõ trên loại sáng, tối - Để thiết lập vị trí của Navbar có thể dùng các lớp position ví dụ
.fixed-top,.fixed-bottom
Hiện thị logo Phần tử con .navbar-brand ở trên hiện thị thương hiệu, luôn xuất hiện trên Navbar, có thể thiết lập nó là một
Brand Text, một Brand Link, một Brand - Hình ảnh hoặc một Brank Link + Ảnh
Phần tử .navbar-toggler Ở trên có một <button≶ thiết lập lớp .navbar-toggler để tạo ra một Toggler Button, nút bấm này chỉ xuất hiện khi màn hình dưới kích thước thiết lập bởi .navbar-expand{-sm|-md|-lg|-xl}, khi bấm vào nó nó sẽ mở rộng Navbar đổ xuống để xuất hiện các thành phần bị ẩn. Hãy thiết lập thuộc tính phần tử này như code ví dụ ở trên, đảm bảo có các thuộc tính data-toggle="collapse" aria-expanded="false" và chú ý là data-target="#my-nav-bar" aria-controls="my-nav-bar" với my-nav-bar là
Khu vực trình bày nội dung NavBar
Các thành phần còn lại của NavBar sẽ trình bày trong một phần tử chứa có gán .navbar-toggler liên kết đến qua thuộc tính data-target, aria-controls. Phần tử này cần thiết lập thuộc tính class="collapse navbar-collapse", hãy xem code ví dụ ở trên
Các nội dung cần thêm vào NavBar sẽ đưa vào trong phần tử chứa này, ta sẽ xem xét một vài loại thành phần thêm vào:
Thêm vào các Menu các mục menu xuất hiện trên Navbar được tạo ra từ phần tử .navbar-nav, phần tử con là .nav-item chứa link từ lớp .nav-link, cấu trúc này có dạng như sau:
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Trang chủ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Học HTML</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Gửi bài</a>
</li>
</ul>
Mục nào ở trạng thái hoạt động thì cho thêm .active, link nào muốn vô hiệu thì thêm vào .nav-link lớp .disabled
Thêm vào DropDown Các .nav-item cũng có thể thiết lập là một Dropdown để có mục Menu thả xuống, ví dụ thêm theo cấu trúc như sau
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="mydropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu đổ xuống
</a>
<div class="dropdown-menu" aria-labelledby="mydropdown">
<a class="dropdown-item" href="#">Mục 1</a>
<a class="dropdown-item" href="#">Mục 2 abc</a>
<a class="dropdown-item" href="#">Mục 3 zyz abc</a>
</div>
</li>
