Navbar là thanh điều phối chính nằm ngang, thường đặt tại đầu trang, Navbar được thiết kế với tính năng responsive, trong đó chứa những thành phần như hình tượng của website, nhãn thương hiệu, những thực đơn đổ xuống, những nút bấm …

Bạn Đang Xem: Tạo thanh Navbar trong Bootstrap

NavBar xây dựng từ .navbar kết phù hợp với .navbar-expand-xl cộng với thiết lập dạng sáng tối là .navbar-dark hoặc .navbar-light sau 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 tận dụng kỹ thuật FlexBox nên cũng phải quan tâm đến phần này trước: FlexBox trong Bootstrap

Cơ phiên 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-Logovàlt;/avàgt; <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”></spanvàgt; </buttonvàgt; <div class=”collapse navbar-collapse” id=”my-nav-bar”> <!-HTML những thành phần trình diễn trên Navbar-> </divvàgt; </navvàgt;

Xem Thêm : Skin là gì? Tại sao skin được dùng nhiều trong game?

Cơ phiên bản .navbar Như vậy chính thức bằng thành phần gốc .navbar tiếp sau đó là kết phù hợp với những thành phần định dạng khác ví như:

• .navbar-expand–xl định dạng này chỉ ra chính thức từ screen nào trở lên Navbar hiện thị toàn bộ nội dung, con khác nó sẽ thu gọn lại và xuất hiện nut bấm .navbar-toggler để nhấn vào mở rộng. Ở ví dụ trên tận dụng .navbar-expand-lg nên những screen dưới loại xl (Lớn) sẽ bị thu lại. Hãy thu nhỏ hành lang cửa số trình duyệt để kiểm tra
• Tùy chọn nền cho Navbar bằng những màu cơ phiên bản (bấm để kiểm tra) .bg-info. Nếu những màu trên không đủ dùng thì rất có thể tùy biến bằng CSS riêng hoặc inline css style=”background-color: yourcolor”
• Chọn cho Navbar loại sáng hay tối với navbar-light và navbar-dark. Cơ phiên bản nó sẽ thiết lập màu chữ, link những 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 rất có thể dùng những lớp position ví dụ .fixed-top, .fixed-bottom

Hiện thị logo Thành phần con .navbar-brand ở trên hiện thị thương hiệu, luôn luôn xuất hiện trên Navbar, rất 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 + Hình ảnh

Thành phần .navbar-toggler Ở trên có một <buttonvàamp;lg; thiết lập lớp .navbar-toggler để tiết ra một Toggler Button, nút bấm này chỉ xuất hiện khi screen dưới kích thước thiết lập bởi .navbar-expand-xl, khi nhấn vào nó nó sẽ mở rộng Navbar đổ xuống để xuất hiện những thành phần bị ẩn. Hãy thiết lập tính chất thành phần này như code ví dụ ở trên, lành mạnh có những tính chất data-toggle=”collapse” aria-expanded=”false” và xem xét là data-target=”#my-nav-bar” aria-controls=”my-nav-bar” với my-nav-bar là id của thành phần chứa những phần nội dung trên NavBar (nút bấm, thực đơn, form)

Khu vực trình diễn nội dung NavBar

Những thành phần giữ lại của NavBar sẽ trình diễn trong một thành phần chứa có gán id mà .navbar-toggler liên kết đến qua tính chất data-target, aria-controls. Thành phần này quan trọng lập tính chất class=”collapse navbar-collapse”, hãy xem code ví dụ ở trên

Xem Thêm : Nhôm hệ là gì? Sự khác nhau giữa nhôm hệ và nhôm thường

Những nội dung cần thêm vào NavBar sẽ đưa vào trong thành phần 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 những Thực đơn những mục thực đơn xuất hiện trên Navbar được tiết ra từ thành phần .navbar-nav, thành phần con là .nav-item chứa link từ lớp .nav-link, cấu trúc này còn có dạng như sau:

<ul class=”navbar-nav”> <li class=”nav-item active”> <a class=”nav-link” href=”#”>Trang chủvàlt;/avàgt; </livàgt; <li class=”nav-item”> <a class=”nav-link” href=”#”>Học HTMLvàlt;/avàgt; </livàgt; <li class=”nav-item”> <a class=”nav-link disabled” href=”#”>Gửi bàivàlt;/avàgt; </livàgt; </ulvàgt; + Thêm vào Navbar

Mục nào ở trạng thái hoạt động và sinh hoạt thì cho thêm nữa .active, link nào muốn vô hiệu thì thêm vào .nav-link lớp .disabled

Thêm vào DropDown Những .nav-item cũng rất có thể thiết lập là một Dropdown để tạo ra mục Thực đơn 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”> Thực đơn đổ xuống </avàgt; <div class=”dropdown-menu” aria-labelledby=”mydropdown”> <a class=”dropdown-item” href=”#”>Mục 1vàlt;/avàgt; <a class=”dropdown-item” href=”#”>Mục 2 abcvàlt;/avàgt; <a class=”dropdown-item” href=”#”>Mục 3 zyz abcvàlt;/avàgt; </divvàgt; </livàgt; + Thêm vào Navbar n’ + ‘n’ + ”; if ($(‘#my-nav-barvàgt;.navbar-nav’).length ) { $(‘#my-nav-barvàgt;.navbar-nav’).replaceWith(s); } else { $(‘#my-nav-bar’).prepend(s); } reloadcodenav(); }