Bootstrap 4 Navs
Thực đơn điều hướng
Nếu bạn muốn tạo một menu ngang đơn giản, hãy thêm
.navlớp vào một <ul>phần tử, tiếp theo là .nav-item
cho từng phần tử <li>và thêm .nav-linklớp vào liên kết của chúng:
Thí 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>
Điều hướng được căn chỉnh
Thêm .justify-content-centerlớp vào giữa điều hướng và .justify-content-endlớp để căn phải điều hướng.
Thí dụ
<!-- Centered nav -->
<ul class="nav justify-content-center">
<!-- Right-aligned nav -->
<ul class="nav justify-content-end">
Điều hướng dọc
Thêm .flex-columnlớp để tạo điều hướng dọc:
Thí dụ
<ul class="nav
flex-column">
Các tab
Biến menu điều hướng thành các tab điều hướng với .nav-tabslớp. Thêm .activelớp vào liên kết 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.
Thí 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>
Thuốc
Biến menu điều hướng thành thuốc điều hướng với .nav-pillslớp. 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.
Thí 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>
Các tab / viên được điều chỉnh hợp lý
Căn đều các tab / viên thuốc với .nav-justifiedlớp (chiều rộng bằng nhau):
Thí dụ
<ul class="nav nav-pills
nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>
Thuốc có thả xuống
Thí 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-toggle="dropdown" href="#">Dropdown</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</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>
Tab có menu thả xuống
Thí 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-toggle="dropdown" href="#">Dropdown</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</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>
Tab có thể chuyển đổi / động
TRANG CHỦ
Bản thân nỗi đau là quan trọng, nhưng nỗi đau được tăng cường bởi quá trình tạo mỡ, nhưng tôi cho nó thời gian để cắt giảm nó để tôi làm một số công việc lớn và nỗi đau.
Để làm cho các tab có thể chuyển đổi, hãy thêm data-toggle="tab"thuộc tính vào từng liên kết. Sau đó, thêm một .tab-panelớp với một ID duy nhất cho mọi tab và bọc chúng bên trong một
<div>phần tử bằng lớp .tab-content.
Nếu bạn muốn các tab mờ dần khi nhấp vào chúng, hãy thêm
.fadelớp vào .tab-pane:
Thí dụ
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-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>
Thuốc có thể chuyển đổi / động
TRANG CHỦ
Bản thân nỗi đau là quan trọng, nhưng nỗi đau được tăng cường bởi quá trình tạo mỡ, nhưng tôi cho nó thời gian để cắt giảm nó để tôi làm một số công việc lớn và nỗi đau.
Mã tương tự áp dụng cho thuốc viên; chỉ thay đổi thuộc tính chuyển đổi dữ liệu thành data-toggle="pill":
Thí dụ
<!-- Nav pills -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-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>
Toàn bộ tham chiếu Bootstrap 4 Nav
Để có tài liệu tham khảo đầy đủ về tất cả các tùy chọn tab, phương pháp và sự kiện, hãy truy cập Tham khảo tab Bootstrap 4 JS của chúng tôi .