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ỏ 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-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 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:

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:

    

        Trang chủ
    
    

        Học HTML
    

    

        Gửi bài
    

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

    
        Menu đổ xuống
    
    

        Mục 1
        Mục 2 abc
        Mục 3 zyz abc
    

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