Bootstrap 5 điều hướng
Menu điều hướng
Nếu bạn muốn tạo một menu ngang đơn giản, hãy thêm lớp .nav vào phần tử <ul> , theo sau là .nav-item cho mỗi <li> và thêm lớp .nav-link vào các liên kết của chúng:
Ví dụ
<ul class="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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul> Hãy tự mình thử »Điều hướng được căn chỉnh
Thêm lớp .justify-content-center để căn giữa điều hướng và lớp .justify-content-end để căn chỉnh điều hướng sang phải.
Ví dụ
<!-- Centered nav -->
<ul class="nav justify-content-center">
<!-- Right-aligned nav -->
<ul class="nav justify-content-end">
Hãy tự mình thử »Điều hướng dọc
Thêm lớp .flex-column để tạo điều hướng dọc:
Tab
Biến menu điều hướng thành các tab điều hướng với lớp .nav-tabs . Thêm lớp .active vào liên kết đang hoạt động/hiện tại. Nếu bạn muốn các tab có thể chuyển đổi được, hãy xem ví dụ cuối cùng trên trang này.
Ví dụ
<ul class="nav nav-tabs">
<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> Hãy tự mình thử »Thuốc
Biến menu điều hướng thành công cụ điều hướng với lớp .nav-pills . Nếu bạn muốn các viên thuốc có thể chuyển đổi được, hãy xem ví dụ cuối cùng trên trang này.
Ví dụ
<ul class="nav nav-pills">
<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> Hãy tự mình thử »Tab/thuốc hợp lý
Căn chỉnh các tab/thuốc bằng lớp .nav-justified (chiều rộng bằng nhau):
Ví dụ
<ul class="nav nav-pills
nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul> Hãy tự mình thử »Thuốc có thả xuống
Ví dụ
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item dropdown">
<a class="nav-link
dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li><a
class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</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> Hãy tự mình thử »Các tab có thả xuống
Ví dụ
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item dropdown">
<a class="nav-link
dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li><a
class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</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> Hãy tự mình thử »Tab có thể chuyển đổi / động
TRANG CHỦ
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua.
Để làm cho các tab có thể chuyển đổi được, hãy thêm thuộc tính data-toggle="tab" vào mỗi liên kết. Sau đó, thêm lớp .tab-pane với một ID duy nhất cho mỗi tab và bọc chúng bên trong phần tử <div> với lớp .tab-content .
Nếu bạn muốn các tab mờ dần trong và ngoài khi nhấp vào chúng, hãy thêm lớp .fade vào .tab-pane :
Ví dụ
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-bs-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-bs-toggle="tab"
href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>
Hãy tự mình thử »Thuốc có thể chuyển đổi / động
TRANG CHỦ
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua.
Mã tương tự áp dụng cho thuốc viên; chỉ thay đổi thuộc tính data-toggle thành data-toggle="pill" :
Ví dụ
<!-- Nav pills -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-bs-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-bs-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>
Hãy tự mình thử »