Điều hướng và tab
Tài liệu và ví dụ về cách sử dụng các thành phần điều hướng đi kèm của Bootstrap.
Điều hướng cơ sở
Điều hướng có sẵn trong Bootstrap chia sẻ kiểu và đánh dấu chung, từ .nav
lớp cơ sở đến trạng thái hoạt động và trạng thái bị vô hiệu hóa. Hoán đổi các lớp bổ trợ để chuyển đổi giữa mỗi kiểu.
Thành .nav
phần cơ sở được xây dựng bằng flexbox và cung cấp nền tảng vững chắc để xây dựng tất cả các loại thành phần điều hướng. Nó bao gồm một số ghi đè kiểu (để làm việc với danh sách), một số đệm liên kết cho các vùng truy cập lớn hơn và kiểu cơ bản bị tắt.
Thành .nav
phần cơ sở không bao gồm bất kỳ .active
trạng thái nào. Các ví dụ sau bao gồm lớp, chủ yếu để chứng minh rằng lớp cụ thể này không kích hoạt bất kỳ kiểu đặc biệt nào.
Để chuyển trạng thái hoạt động cho các công nghệ hỗ trợ, hãy sử dụng aria-current
thuộc tính - sử dụng page
giá trị cho trang hiện tại hoặc true
cho mục hiện tại trong một tập hợp.
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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">Disabled</a>
</li>
</ul>
Các lớp học được sử dụng xuyên suốt, vì vậy đánh dấu của bạn có thể siêu linh hoạt. Sử dụng <ul>
các mục như trên, <ol>
nếu thứ tự các mặt hàng của bạn là quan trọng, hoặc cuộn của riêng bạn với một <nav>
phần tử. Bởi vì việc .nav
sử dụng display: flex
, các liên kết điều hướng hoạt động giống như các mục điều hướng, nhưng không có đánh dấu bổ sung.
<nav class="nav">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
</nav>
Các kiểu có sẵn
Thay đổi kiểu của .nav
thành phần s bằng các bổ ngữ và tiện ích. Trộn và kết hợp nếu cần, hoặc xây dựng của riêng bạn.
Căn chỉnh theo chiều ngang
Thay đổi căn chỉnh ngang của điều hướng của bạn bằng các tiện ích flexbox . Theo mặc định, các nav được căn trái, nhưng bạn có thể dễ dàng thay đổi chúng thành căn giữa hoặc căn phải.
Căn giữa với .justify-content-center
:
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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">Disabled</a>
</li>
</ul>
Căn phải với .justify-content-end
:
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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">Disabled</a>
</li>
</ul>
Theo chiều dọc
Xếp chồng điều hướng của bạn bằng cách thay đổi hướng mục linh hoạt với .flex-column
tiện ích. Cần xếp chúng trên một số khung nhìn nhưng không phải những khung khác? Sử dụng các phiên bản đáp ứng (ví dụ .flex-sm-column
:).
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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">Disabled</a>
</li>
</ul>
Như mọi khi, điều hướng dọc cũng có thể thực hiện được mà không cần <ul>
s.
<nav class="nav flex-column">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
</nav>
Các tab
Lấy điều hướng cơ bản từ phía trên và thêm .nav-tabs
lớp để tạo giao diện theo thẻ. Sử dụng chúng để tạo các vùng có thể lập tab bằng plugin JavaScript tab của chúng tôi .
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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">Disabled</a>
</li>
</ul>
Thuốc
Sử dụng cùng một HTML đó, nhưng sử dụng .nav-pills
thay thế:
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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">Disabled</a>
</li>
</ul>
Điền và căn chỉnh
Buộc .nav
nội dung của bạn mở rộng toàn bộ chiều rộng có sẵn một trong hai lớp bổ trợ. Để lấp đầy một cách tương xứng tất cả không gian có sẵn với .nav-item
s của bạn, hãy sử dụng .nav-fill
. Lưu ý rằng tất cả không gian theo chiều ngang đều bị chiếm dụng, nhưng không phải mọi mục điều hướng đều có cùng chiều rộng.
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Much longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Khi sử dụng <nav>
điều hướng dựa trên cơ sở, bạn có thể bỏ qua một cách an toàn .nav-item
vì chỉ .nav-link
cần thiết cho các phần tử tạo kiểu <a>
.
<nav class="nav nav-pills nav-fill">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
</nav>
Đối với các phần tử có chiều rộng bằng nhau, hãy sử dụng .nav-justified
. Tất cả không gian ngang sẽ bị chiếm bởi các liên kết điều hướng, nhưng không giống như .nav-fill
ở trên, mọi mục điều hướng sẽ có cùng chiều rộng.
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Much longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
Tương tự .nav-fill
như ví dụ sử dụng <nav>
điều hướng dựa trên cơ sở.
<nav class="nav nav-pills nav-justified">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
</nav>
Làm việc với các tiện ích linh hoạt
Nếu bạn cần các biến thể điều hướng đáp ứng, hãy xem xét sử dụng một loạt các tiện ích flexbox . Mặc dù dài dòng hơn, nhưng các tiện ích này cung cấp khả năng tùy chỉnh cao hơn trên các điểm ngắt đáp ứng. Trong ví dụ bên dưới, điều hướng của chúng ta sẽ được xếp chồng lên điểm ngắt thấp nhất, sau đó thích ứng với bố cục nằm ngang lấp đầy chiều rộng có sẵn bắt đầu từ điểm ngắt nhỏ.
<nav class="nav nav-pills flex-column flex-sm-row">
<a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
<a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
</nav>
Về khả năng tiếp cận
Nếu bạn đang sử dụng nav để cung cấp thanh điều hướng, hãy đảm bảo thêm một role="navigation"
vào vùng chứa mẹ hợp lý nhất của <ul>
hoặc bao bọc một <nav>
phần tử xung quanh toàn bộ điều hướng. Không thêm vai trò vào <ul>
chính nó, vì điều này sẽ ngăn nó được công bố như một danh sách thực tế bởi các công nghệ hỗ trợ.
Lưu ý rằng thanh điều hướng, ngay cả khi được tạo kiểu trực quan dưới dạng tab cùng .nav-tabs
lớp, không nên được cung cấp role="tablist"
hoặc role="tab"
thuộc role="tabpanel"
tính. Các giao diện này chỉ thích hợp cho các giao diện theo thẻ động, như được mô tả trong các Thực tiễn về tác giả của WAI ARIA . Xem hành vi JavaScript cho các giao diện theo thẻ động trong phần này để làm ví dụ. Thuộc aria-current
tính này không cần thiết trên các giao diện có tab động vì JavaScript của chúng tôi xử lý trạng thái đã chọn bằng cách thêm aria-selected="true"
vào tab đang hoạt động.
Sử dụng trình đơn thả xuống
Thêm menu thả xuống với một chút HTML bổ sung và plugin JavaScript thả xuống .
Các tab có danh sách thả xuống
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</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">Disabled</a>
</li>
</ul>
Thuốc có danh sách thả xuống
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</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">Disabled</a>
</li>
</ul>
Sass
Biến
$nav-link-padding-y: .5rem;
$nav-link-padding-x: 1rem;
$nav-link-font-size: null;
$nav-link-font-weight: null;
$nav-link-color: $link-color;
$nav-link-hover-color: $link-hover-color;
$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color: $gray-600;
$nav-tabs-border-color: $gray-300;
$nav-tabs-border-width: $border-width;
$nav-tabs-border-radius: $border-radius;
$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color: $gray-700;
$nav-tabs-link-active-bg: $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;
$nav-pills-border-radius: $border-radius;
$nav-pills-link-active-color: $component-active-color;
$nav-pills-link-active-bg: $component-active-bg;
Hành vi JavaScript
Sử dụng plugin JavaScript tab — bao gồm nó riêng lẻ hoặc thông qua bootstrap.js
tệp đã biên dịch — để mở rộng các tab và viên điều hướng của chúng tôi nhằm tạo các ngăn có thể tab của nội dung cục bộ.
Giao diện theo thẻ động, như được mô tả trong Thực tiễn tác giả WAI ARIArole="tablist"
, yêu cầu role="tab"
và role="tabpanel"
các aria-
thuộc tính bổ sung để truyền đạt cấu trúc, chức năng và trạng thái hiện tại của chúng cho người dùng công nghệ hỗ trợ (chẳng hạn như trình đọc màn hình). Cách tốt nhất, chúng tôi khuyên bạn nên sử dụng <button>
các phần tử cho các tab, vì đây là các điều khiển kích hoạt thay đổi động, thay vì các liên kết điều hướng đến một trang hoặc vị trí mới.
Lưu ý rằng giao diện theo thẻ động không được chứa menu thả xuống, vì điều này gây ra các vấn đề về khả năng sử dụng và khả năng truy cập. Từ góc độ khả năng sử dụng, thực tế là phần tử kích hoạt của tab hiện đang hiển thị không hiển thị ngay lập tức (vì nó nằm trong menu thả xuống đã đóng) có thể gây ra nhầm lẫn. Từ quan điểm khả năng tiếp cận, hiện không có cách hợp lý nào để ánh xạ loại cấu trúc này với một mẫu WAI ARIA tiêu chuẩn, có nghĩa là nó không thể dễ hiểu đối với người sử dụng công nghệ hỗ trợ.
Đây là một số nội dung trình giữ chỗ của nội dung liên quan đến tab Trang chủ. Nhấp vào tab khác sẽ chuyển đổi chế độ hiển thị của tab này cho tab tiếp theo. Tab JavaScript hoán đổi các lớp để kiểm soát khả năng hiển thị và kiểu dáng nội dung. Bạn có thể sử dụng nó với các tab, viên thuốc và bất kỳ .nav
điều hướng được cấp quyền nào khác.
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
Để giúp phù hợp với nhu cầu của bạn, điều này hoạt động với <ul>
đánh dấu dựa trên, như được hiển thị ở trên hoặc với bất kỳ đánh dấu "tự cuộn" nào tùy ý. Lưu ý rằng nếu bạn đang sử dụng <nav>
, bạn không nên thêm role="tablist"
trực tiếp vào nó, vì điều này sẽ ghi đè vai trò gốc của phần tử làm mốc điều hướng. Thay vào đó, hãy chuyển sang một phần tử thay thế (trong ví dụ dưới đây, một phần tử đơn giản <div>
) và quấn <nav>
xung quanh nó.
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
<button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>
Plugin tab cũng hoạt động với thuốc.
Đây là một số nội dung trình giữ chỗ của nội dung liên quan đến tab Trang chủ. Nhấp vào tab khác sẽ chuyển đổi chế độ hiển thị của tab này cho tab tiếp theo. Tab JavaScript hoán đổi các lớp để kiểm soát khả năng hiển thị và kiểu dáng nội dung. Bạn có thể sử dụng nó với các tab, viên thuốc và bất kỳ .nav
điều hướng được cấp quyền nào khác.
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>
Và với những viên thuốc dọc.
Đây là một số nội dung trình giữ chỗ của nội dung liên quan đến tab Trang chủ. Nhấp vào tab khác sẽ chuyển đổi chế độ hiển thị của tab này cho tab tiếp theo. Tab JavaScript hoán đổi các lớp để kiểm soát khả năng hiển thị và kiểu dáng nội dung. Bạn có thể sử dụng nó với các tab, viên thuốc và bất kỳ .nav
điều hướng được cấp quyền nào khác.
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav
-powered navigation.
<div class="d-flex align-items-start">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
<button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
<button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>
</div>
Sử dụng thuộc tính dữ liệu
Bạn có thể kích hoạt điều hướng tab hoặc viên thuốc mà không cần viết bất kỳ JavaScript nào bằng cách chỉ định data-bs-toggle="tab"
hoặc data-bs-toggle="pill"
trên một phần tử. Sử dụng các thuộc tính dữ liệu này trên .nav-tabs
hoặc .nav-pills
.
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
Qua JavaScript
Bật các tab có thể chuyển thành tab qua JavaScript (mỗi tab cần được kích hoạt riêng lẻ):
var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})
Bạn có thể kích hoạt các tab riêng lẻ theo một số cách:
var triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
var triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
Hiệu ứng mờ dần
Để làm cho các tab mờ dần, hãy thêm .fade
vào từng tab .tab-pane
. Ngăn tab đầu tiên cũng phải .show
hiển thị nội dung ban đầu.
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
Phương pháp
Các phương thức và chuyển tiếp không đồng bộ
Tất cả các phương thức API là không đồng bộ và bắt đầu quá trình chuyển đổi . Họ quay lại người gọi ngay sau khi quá trình chuyển đổi được bắt đầu nhưng trước khi quá trình chuyển đổi kết thúc . Ngoài ra, một lệnh gọi phương thức trên một thành phần chuyển tiếp sẽ bị bỏ qua .
Xem tài liệu JavaScript của chúng tôi để biết thêm thông tin .
constructor
Kích hoạt phần tử tab và vùng chứa nội dung. Tab phải có một data-bs-target
hoặc, nếu sử dụng một liên kết, một href
thuộc tính, nhắm mục tiêu một nút vùng chứa trong DOM.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
<script>
var firstTabEl = document.querySelector('#myTab li:last-child button')
var firstTab = new bootstrap.Tab(firstTabEl)
firstTab.show()
</script>
buổi bieu diễn
Chọn tab đã cho và hiển thị ngăn liên kết của nó. Bất kỳ tab nào khác đã được chọn trước đó sẽ trở thành không được chọn và ngăn liên kết của nó bị ẩn. Trả về trình gọi trước khi ngăn tab thực sự được hiển thị (tức là trước khi shown.bs.tab
sự kiện xảy ra).
var someTabTriggerEl = document.querySelector('#someTabTrigger')
var tab = new bootstrap.Tab(someTabTriggerEl)
tab.show()
vứt bỏ
Hủy tab của một phần tử.
getInstance
Phương thức tĩnh cho phép bạn lấy bản sao tab được liên kết với phần tử DOM
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Phương thức tĩnh cho phép bạn lấy bản sao tab được liên kết với phần tử DOM hoặc tạo một bản mới trong trường hợp nó chưa được khởi tạo
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Sự kiện
Khi hiển thị một tab mới, các sự kiện sẽ kích hoạt theo thứ tự sau:
hide.bs.tab
(trên tab hoạt động hiện tại)show.bs.tab
(trên tab được hiển thị)hidden.bs.tab
(trên tab hoạt động trước đó, tab tương tự như chohide.bs.tab
sự kiện)shown.bs.tab
(trên tab vừa được hiển thị mới hoạt động, tab tương tự như đối vớishow.bs.tab
sự kiện)
Nếu không có tab nào hoạt động, thì sự kiện hide.bs.tab
và hidden.bs.tab
sẽ không được kích hoạt.
Loại sự kiện | Sự mô tả |
---|---|
show.bs.tab |
Sự kiện này kích hoạt trên chương trình tab, nhưng trước khi tab mới được hiển thị. Sử dụng event.target và event.relatedTarget để nhắm mục tiêu tab đang hoạt động và tab đang hoạt động trước đó (nếu có) tương ứng. |
shown.bs.tab |
Sự kiện này kích hoạt trên tab hiển thị sau khi tab được hiển thị. Sử dụng event.target và event.relatedTarget để nhắm mục tiêu tab đang hoạt động và tab đang hoạt động trước đó (nếu có) tương ứng. |
hide.bs.tab |
Sự kiện này kích hoạt khi một tab mới được hiển thị (và do đó tab đang hoạt động trước đó sẽ bị ẩn). Sử dụng event.target và event.relatedTarget để nhắm mục tiêu tab đang hoạt động hiện tại và tab sắp hoạt động mới, tương ứng. |
hidden.bs.tab |
Sự kiện này kích hoạt sau khi một tab mới được hiển thị (và do đó tab hoạt động trước đó bị ẩn). Sử dụng event.target và event.relatedTarget để nhắm mục tiêu tab hoạt động trước đó và tab hoạt động mới, tương ứng. |
var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})