Tạo thanh Navbar trong Bootstrap

Thao những thanh Menu, NavBar điều hướng hiện thị ở đầu những trang bằng. navbar, thiết lập hiện thị Menu Dropdown trên NavBar
Navbar là thanh điều hướng chính nằm ngang, thường đặt ở đầu trang, Navbar được phong cách 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 tên thương hiệu, những menu đổ xuống, những 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:

Bạn đang đọc: Tạo thanh Navbar trong Bootstrap


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ỏ hành lang cửa số trình duyệt để kiểm tra
  • Chọn cho Navbar loại sáng hay tối với navbar-lightnavbar-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 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à id của phần tử chứa các phần nội dung trên NavBar (nút bấm, menu, form)

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:

Xem thêm: favorable là gì ? nghĩa của từ favorable trong tiếng việt

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:

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

Source: https://mindovermetal.org
Category: Wiki là gì

Rate this post
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments