Tạo thanh Navbar trong Bootstrap

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

NavBar xây dựng từ .navbar hài hòa có .navbar-expand-lg cùng có 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ự động thiết lập nền background có màu sắc tùy thuộc} chọn. Navbar dùng kỹ thuật FlexBox nên cũng cần để ý tới phần này trước: FlexBox trong Bootstrap

Cơ bản xây dựng 1 HTML Navbar sẽ như sau:

<nav class=”navbar navbar-expand-lg navbar-dark bg-dark”> <a category=”navbar-brand” href=”#”>Model-Brand</a> <button class=”navbar-toggler” kind=”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 những thành phần trình bày trên Navbar-> </div> </nav>

Cơ bản .navbar Như vậy khởi đầu bằng phần tử gốc .navbar tiếp theo là hài hòa có những phần tử định dạng khác như:

  • .navbar-expand–lg định dạng này chỉ ra khởi đầu từ màn hình nào trở lên Navbar hiện thị đa số 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. Tại thí dụ trên dùng .navbar-expand-lg nên những màn hình dưới loại xl (Lớn) sẽ bị thu lại. Hãy thu bé cửa sổ trình thông qua để đánh giá
  • Tùy thuộc} chọn nền cho Navbar bằng những màu sắc cơ bản (bấm để đánh giá) .bg-secondary. Ví dụ những màu sắc trên ko đủ dùng thì có thể tùy thuộc} biến bằng CSS riêng hoặc inline css fashion=”background-color: yourcolor”
  • Chọn cho Navbar loại sáng hay tối có navbar-light và navbar-dark. Cơ bản nó sẽ thiết lập màu sắc chữ, hyperlink 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ùng vị trí của Navbar có thể dùng những lớp place thí dụ .fixed-top, .fixed-bottom
Xem Thêm  Rapper và Emcee khác nhau như thế nào? – Gangs World

Hiện thị brand Phần tử con .navbar-brand tại trên hiện thị nhãn hiệu, luôn xuất hiện trên Navbar, có thể thiết lập nó là 1 Model Textual content, 1 Model Hyperlink, 1 Model – Hình ảnh hoặc 1 Brank Hyperlink + Ảnh

Phần tử .navbar-toggler Tại trên có 1 <button&lg; thiết lập lớp .navbar-toggler để tạo ra 1 Toggler Button, nút bấm này chỉ xuất hiện lúc màn hình dưới kích thước thiết lập bởi .navbar-expand-lg, lúc bấm 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 thuộc tính phần tử này như code thí dụ tại trên, đảm bảo có những thuộc tính data-toggle=”collapse” aria-expanded=”false” và chú ý là data-target=”#my-nav-bar” aria-controls=”my-nav-bar” có my-nav-bar là id của phần tử chứa những phần nội dung trên NavBar (nút bấm, menu, type)

Khu vực trình bày nội dung NavBar

Những thành phần còn lại của NavBar sẽ trình bày trong 1 phần tử chứa có gán id mà .navbar-toggler hợp tác tới 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 thí dụ tại trên

Những 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 1 vài loại thành phần thêm vào:

Thêm vào những Menu những phần 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 hyperlink từ lớp .nav-link, cấu trúc này có dạng như sau:

<ul class=”navbar-nav”> <li class=”nav-item energetic”> <a category=”nav-link” href=”#”>Trang chủ</a> </li> <li class=”nav-item”> <a category=”nav-link” href=”#”>Học HTML</a> </li> <li class=”nav-item”> <a category=”nav-link disabled” href=”#”>Gửi bài</a> </li> </ul> + Thêm vào Navbar

Xem Thêm  Bài 6: A number of Regression Evaluation Là Gì ? Định Nghĩa, Ví Dụ, Giải Thích

Phần nào tại trạng thái hoạt động thì cho thêm .energetic, hyperlink 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 có thể thiết lập là 1 Dropdown để có phần Menu thả xuống, thí dụ thêm theo cấu trúc như sau

<li class=”nav-item dropdown”> <a category=”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 category=”dropdown-item” href=”#”>Phần 1</a> <a category=”dropdown-item” href=”#”>Phần 2 abc</a> <a category=”dropdown-item” href=”#”>Phần 3 zyz abc</a> </div> </li> + Thêm vào Navbar n’ + ‘n’ + ”; if ($(‘#my-nav-bar>.navbar-nav’).size ) { $(‘#my-nav-bar>.navbar-nav’).replaceWith(s); } else { $(‘#my-nav-bar’).prepend(s); } reloadcodenav(); }