Đ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.

Trên trang này

Đ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ừ .navlớ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 .navphầ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 .navphần cơ sở không bao gồm bất kỳ .activetrạ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-currentthuộc tính - sử dụng pagegiá trị cho trang hiện tại hoặc truecho mục hiện tại trong một tập hợp.

html

<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 .navsử 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.

html

<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 .navthà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:

html

<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:

html

<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-columntiệ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:).

html

<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.

html

<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-tabslớ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 .

html

<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-pillsthay thế:

html

<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 .navnộ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-items 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.

html

<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-itemvì chỉ .nav-linkcần thiết cho các phần tử tạo kiểu <a>.

html

<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.

html

<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-fillnhư ví dụ sử dụng <nav>điều hướng dựa trên cơ sở.

html

<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ỏ.

html

<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-tabslớp, không nên được cung cấp role="tablist"hoặc role="tab"thuộc role="tabpanel"tính. Những điều này chỉ thích hợp cho các giao diện có tab động, như được mô tả trong mẫu tab Hướng dẫn thực hành tác giả 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-currenttí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

html

<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

html

<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>

CSS

Biến

Đã thêm vào v5.2.0

Là một phần của phương pháp tiếp cận biến CSS đang phát triển của Bootstrap, giờ đây, nav sử dụng các biến CSS cục bộ .navvà .nav-tabsđể .nav-pillstùy chỉnh thời gian thực nâng cao. Giá trị cho các biến CSS được đặt thông qua Sass, do đó, tùy chỉnh Sass cũng vẫn được hỗ trợ.

Trên .navlớp cơ sở:

  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: #{$nav-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

Trên .nav-tabslớp bổ trợ:

  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

Trên .nav-pillslớp bổ trợ:

  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

Biến Sass

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    var(--#{$prefix}link-color);
$nav-link-hover-color:              var(--#{$prefix}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.jstệ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ộ.

Đâ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.

Đây là một số nội dung trình giữ chỗ của nội dung liên quan đến tab Tiểu sử . 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 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.

This is some placeholder content the Disabled tab's associated content.

<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-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</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ó.

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 Disabled tab's associated content.

<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>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

Plugin tab cũng hoạt động với thuốc.

This is some placeholder content the Disabled tab's associated content.

<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>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

Và với những viên thuốc dọc. Tốt nhất, đối với các tab dọc, bạn cũng nên thêm aria-orientation="vertical"vào vùng chứa danh sách tab.

This is some placeholder content the Disabled tab's associated content.

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-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

Khả năng tiếp cận

Giao diện tab động, như được mô tả trong mẫu tab Hướng dẫn thực hành tác giả 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.

Phù hợp với mẫu Thực hành tác giả ARIA, chỉ tab hiện đang hoạt động mới nhận được tiêu điểm bàn phím. Khi khởi chạy plugin JavaScript, nó sẽ đặt tabindex="-1"trên tất cả các điều khiển tab không hoạt động. Khi tab hiện đang hoạt động có tiêu điểm, các phím con trỏ sẽ kích hoạt tab trước / sau, với plugin thay đổi chuyển độngtabindex cho phù hợp. Tuy nhiên, lưu ý rằng plugin JavaScript không phân biệt giữa danh sách tab ngang và dọc khi nói đến các tương tác chính của con trỏ: bất kể hướng của danh sách tab là gì, cả con trỏ lên và trái đều chuyển đến tab trước đó và con trỏ xuống và con trỏ phải đi tới tab tiếp theo.

Nói chung, để tạo điều kiện thuận lợi cho việc điều hướng bàn phím, bạn cũng nên làm cho các bảng tab có thể tiêu điểm được, trừ khi phần tử đầu tiên chứa nội dung có ý nghĩa bên trong bảng tab đã có thể lấy tiêu điểm. Plugin JavaScript không cố gắng xử lý khía cạnh này — khi thích hợp, bạn sẽ cần phải làm cho bảng tab của mình có thể lấy tiêu điểm một cách rõ ràng bằng cách thêm tabindex="0"vào phần đánh dấu của bạn.

Plugin JavaScript tab không hỗ trợ các giao diện theo tab có chứa menu thả xuống, vì những giao diện này gây ra cả vấn đề 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ợ.

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-tabshoặ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" tabindex="0">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</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ẻ):

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', 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:

const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const 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 .fadevào từng tab .tab-pane. Ngăn tab đầu tiên cũng phải .showhiể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" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</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 .

Kích hoạt nội dung của bạn dưới dạng phần tử tab.

Bạn có thể tạo một cá thể tab bằng hàm tạo, ví dụ:

const bsTab = new bootstrap.Tab('#myTab')

Phương pháp	Sự mô tả
`dispose`	Hủy tab của một phần tử.
`getInstance`	Phương thức tĩnh cho phép bạn lấy cá thể tab được liên kết với một phần tử DOM, bạn có thể sử dụng nó như sau `bootstrap.Tab.getInstance(element)`:.
`getOrCreateInstance`	Phương thức static trả về một phiên bản tab được liên kết với một phần tử DOM hoặc tạo một phiên bản mới trong trường hợp nó chưa được khởi tạo. `bootstrap.Tab.getOrCreateInstance(element)`Bạn có thể sử dụng nó như thế này :.
`show`	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).

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ư cho hide.bs.tabsự 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ới show.bs.tabsự kiện)

Nếu không có tab nào hoạt động, thì sự kiện hide.bs.tabvà hidden.bs.tabsẽ không được kích hoạt.

Loại sự kiện	Sự mô tả
`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.
`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.

const tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', event => {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})