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 …
Bạn đang đọc: Tạo thanh Navbar trong Bootstrap
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:
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-lg nê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
- Tùy chọn nền cho Navbar bằng các màu cơ bản (bấm để kiểm tra) .bg-{primary|secondary|success|info|warning|danger|light|dark}. Nếu các màu trên không đủ dùng thì 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ơ 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
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 id mà .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:
+ Thêm vào Navbar
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
+ Thêm vào Navbar n’ + ‘n’ + ”; if ($(‘#my-nav-bar>.navbar-nav’).length ) { $(‘#my-nav-bar>.navbar-nav’).replaceWith(s); } else { $(‘#my-nav-bar’).prepend(s); } reloadcodenav(); }
>>>>>Xem thêm: Lai rai chữ nghĩa: Một li, một dặm | BÁO QUẢNG NAM ONLINE – Tin tức mới nhất
