Bootstrap 5 thanh điều hướng
Thanh điều hướng
Thanh điều hướng là một tiêu đề điều hướng được đặt ở đầu trang:
Thanh điều hướng cơ bản
Với Bootstrap, thanh điều hướng có thể mở rộng hoặc thu gọn tùy thuộc vào kích thước màn hình.
Một thanh điều hướng tiêu chuẩn được tạo bằng lớp .navbar , theo sau là lớp thu gọn đáp ứng: .navbar-expand-xxl|xl|lg|md|sm (xếp thanh điều hướng theo chiều dọc trên các màn hình xxlarge, cực lớn, lớn, vừa hoặc nhỏ ).
Để thêm liên kết bên trong thanh điều hướng, hãy sử dụng phần tử <ul> (hoặc <div> ) với class="navbar-nav" . Sau đó thêm các phần tử <li> với lớp .nav-item , theo sau là phần tử <a> với lớp .nav-link :
Ví dụ
<!-- A grey horizontal navbar that becomes
vertical on small screens -->
<nav class="navbar navbar-expand-sm
bg-light">
<div class="container-fluid">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
</ul>
</div>
</nav>Hãy tự mình thử »Thanh điều hướng dọc
Xóa lớp .navbar-expand-* để tạo thanh điều hướng luôn thẳng đứng:
Thanh điều hướng ở giữa
Thêm lớp .justify-content-center để căn giữa thanh điều hướng:
Ví dụ
<nav class="navbar navbar-expand-sm
bg-light justify-content-center">
...
</nav> Hãy tự mình thử »Thanh điều hướng màu
Sử dụng bất kỳ lớp .bg-color nào để thay đổi màu nền của thanh điều hướng ( .bg-primary , .bg-success , .bg-info , .bg-warning , .bg-danger , .bg-secondary , .bg-dark và .bg-light )
Mẹo: Thêm màu văn bản màu trắng cho tất cả các liên kết trong thanh điều hướng bằng lớp .navbar-dark hoặc sử dụng lớp .navbar-light để thêm màu văn bản đen .
Ví dụ
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link
active"
href="#">Active</a>
</li>
<li
class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link
disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<!-- Black background with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blue
background with white text -->
<nav class="navbar navbar-expand-sm
bg-primary navbar-dark">...</nav>
Hãy tự mình thử » Trạng thái hoạt động/bị vô hiệu hóa : Thêm lớp .active vào phần tử <a> để đánh dấu liên kết hiện tại hoặc lớp .disabled để cho biết rằng liên kết không thể nhấp vào được.
Biểu tượng thương hiệu
Lớp .navbar-brand được sử dụng để làm nổi bật thương hiệu/logo/tên dự án trên trang của bạn:
Ví dụ
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div
class="container-fluid">
<a class="navbar-brand"
href="#">Logo</a>
</div>
</nav> Hãy tự mình thử » Khi sử dụng lớp .navbar-brand với hình ảnh, Bootstrap 5 sẽ tự động định kiểu hình ảnh cho vừa với thanh điều hướng theo chiều dọc.
Ví dụ
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div
class="container-fluid">
<a class="navbar-brand"
href="#">
<img src="logo.png"
alt="Avatar Logo" style="width:40px;" class="rounded-pill">
</a>
</div>
</nav> Hãy tự mình thử »Văn bản thanh điều hướng
Sử dụng lớp .navbar-text để căn chỉnh theo chiều dọc bất kỳ phần tử nào bên trong thanh điều hướng không phải là liên kết (đảm bảo phần đệm và màu văn bản phù hợp).
Ví dụ
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div
class="container-fluid">
<span
class="navbar-text">Navbar text</span>
</div>
</nav> Hãy tự mình thử »Rất thường xuyên, đặc biệt là trên màn hình nhỏ, bạn muốn ẩn các liên kết điều hướng và thay thế chúng bằng một nút sẽ hiển thị chúng khi nhấp vào.
Để tạo thanh điều hướng có thể thu gọn, hãy sử dụng nút có class="navbar-toggler", data-bs-toggle="collapse" and data-bs-target="# thetarget " . Sau đó, bọc nội dung thanh điều hướng (các liên kết, v.v.) bên trong phần tử <div> với class="collapse navbar-collapse" , theo sau là một id khớp với data-bs-target của nút: " thetarget ".
Ví dụ
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div
class="container-fluid">
<a class="navbar-brand"
href="#">Logo</a>
<button class="navbar-toggler"
type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li
class="nav-item">
<a
class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav> Hãy tự mình thử » Mẹo: Bạn cũng có thể xóa lớp .navbar-expand-md để LUÔN ẩn các liên kết thanh điều hướng và hiển thị nút bật tắt.
Thanh điều hướng có thả xuống
Thanh điều hướng cũng có thể chứa các menu thả xuống:
Ví dụ
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
href="#" role="button" data-bs-toggle="dropdown">Dropdown</a>
<ul
class="dropdown-menu">
<li><a class="dropdown-item"
href="#">Link</a></li>
<li><a class="dropdown-item"
href="#">Another link</a></li>
<li><a
class="dropdown-item" href="#">A third link</a></li>
</ul>
</li> Hãy tự mình thử »Biểu mẫu và nút điều hướng
Bạn cũng có thể bao gồm các biểu mẫu bên trong thanh điều hướng:
Ví dụ
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div
class="container-fluid">
<a class="navbar-brand"
href="javascript:void(0)">Logo</a>
<button
class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#mynavbar">
<span
class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
</ul>
<form class="d-flex">
<input
class="form-control me-2" type="text" placeholder="Search">
<button class="btn btn-primary" type="button">Search</button>
</form>
</div>
</div>
</nav> Hãy tự mình thử »Thanh điều hướng cố định
Thanh điều hướng cũng có thể được cố định ở đầu hoặc cuối trang.
Thanh điều hướng cố định vẫn hiển thị ở vị trí cố định (trên cùng hoặc dưới cùng) độc lập với thao tác cuộn trang.
Lớp .fixed-top làm cho thanh điều hướng được cố định ở trên cùng :
Ví dụ
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav> Hãy tự mình thử » Sử dụng lớp .fixed-bottom để đặt thanh điều hướng ở cuối trang:
Ví dụ
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav> Hãy tự mình thử » Sử dụng lớp .sticky-top để cố định thanh điều hướng/giữ ở đầu trang khi bạn cuộn qua nó. Lưu ý: Lớp này không hoạt động trong IE11 trở về trước (sẽ coi nó là position:relative ).
Ví dụ
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav> Hãy tự mình thử »