跳到主要內容 跳到文檔導航
Check
in English

導航和選項卡

有關如何使用 Bootstrap 包含的導航組件的文檔和示例。

在本頁面

基地導航

Bootstrap 中可用的導航共享通用標記和样式，從基.nav類到活動和禁用狀態。交換修飾符類以在每種樣式之間切換。

基礎.nav組件使用 flexbox 構建，為構建所有類型的導航組件提供了堅實的基礎。它包括一些樣式覆蓋（用於處理列表）、一些針對較大點擊區域的鏈接填充以及基本的禁用樣式。

基本.nav組件不包含任何.active狀態。下面的例子包含了這個類，主要是為了說明這個特定的類不會觸發任何特殊的樣式。

要將活動狀態傳達給輔助技術，請使用aria-current屬性 — 使用page當前頁面或true集合中當前項目的值。

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>

類貫穿始終，因此您的標記可以非常靈活。如果您的項目的順序很重要，請使用<ul>上面的 s <ol>，或者使用<nav>元素滾動您自己的。由於.navuses display: flex，導航鏈接的行為與導航項目相同，但沒有額外的標記。

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>

可用樣式

.nav使用修飾符和實用程序更改 s 組件的樣式。根據需要混合和匹配，或構建自己的。

水平對齊

使用flexbox 實用程序更改導航的水平對齊方式。默認情況下，導航是左對齊的，但您可以輕鬆地將它們更改為居中或右對齊。

以 為中心.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>

右對齊.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>

垂直的

.flex-column通過使用該實用程序更改彈性項目方向來堆疊您的導航。需要將它們堆疊在某些視口上而不是其他視口上？使用響應式版本（例如，.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>

與往常一樣，垂直導航也可以不使用<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>

標籤

從上面獲取基本導航並添加.nav-tabs類以生成選項卡式界面。通過我們的標籤 JavaScript 插件使用它們來創建可標籤區域。

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>

藥丸

採用相同的 HTML，但.nav-pills改用：

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>

填寫並證明

強制您.nav的內容擴展兩個修飾符類之一的完整可用寬度。要使用 s 按比例填充所有可用空間，請.nav-item使用.nav-fill. 請注意，所有水平空間都被佔用，但並非每個導航項都具有相同的寬度。

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>

使用<nav>基於 - 的導航時，您可以安全地忽略樣式元素所需的.nav-item內容。.nav-link<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>

對於等寬元素，使用.nav-justified. 所有水平空間都將被導航鏈接佔用，但與.nav-fill上述不同的是，每個導航項目的寬度都相同。

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>

類似於.nav-fill使用<nav>基於導航的示例。

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>

使用 flex 實用程序

如果您需要響應式導航變化，請考慮使用一系列flexbox 實用程序。雖然更冗長，但這些實用程序提供了跨響應斷點的更大定制。在下面的示例中，我們的導航將堆疊在最低斷點上，然後適應水平佈局，從小斷點開始填充可用寬度。

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>

關於可訪問性

如果您使用 navs 來提供導航欄，請務必將 a 添加role="navigation"到 最符合邏輯的父容器中，或者在整個導航周圍<ul>包裹一個元素。<nav>不要將角色添加到<ul>自身，因為這會阻止它被輔助技術宣佈為實際列表。

請注意，導航欄，即使在視覺上被設計為帶有.nav-tabs類的選項卡，也不應該被賦予role="tablist",role="tab"或role="tabpanel"屬性。這些僅適用於動態選項卡式界面，如ARIA 創作實踐指南選項卡模式中所述。有關示例，請參閱本節中動態選項卡式界面的JavaScript 行為。該aria-current屬性在動態選項卡式界面上不是必需的，因為我們的 JavaScript 通過添加aria-selected="true"活動選項卡來處理選定狀態。

使用下拉菜單

添加帶有一點額外 HTML 的下拉菜單和下拉 JavaScript 插件。

帶有下拉菜單的選項卡

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>

帶有下拉菜單的藥丸

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

變量

在 v5.2.0 中添加

作為 Bootstrap 不斷發展的 CSS 變量方法的一部分，導航現在在.nav、.nav-tabs和上使用本地 CSS 變量.nav-pills來增強實時自定義。CSS 變量的值是通過 Sass 設置的，因此仍然支持 Sass 自定義。

在.nav基類上：

  --#{$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};

在.nav-tabs修飾符類上：

  --#{$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};

在.nav-pills修飾符類上：

  --#{$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};

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;

JavaScript 行為

使用標籤 JavaScript 插件（單獨包含它或通過編譯bootstrap.js文件包含它）來擴展我們的導航標籤和藥丸，以創建本地內容的可標籤窗格。

這是Home 選項卡的相關內容的一些佔位符內容。單擊另一個選項卡將切換此選項卡的可見性以供下一個選項卡使用。選項卡 JavaScript 交換類以控制內容可見性和样式。您可以將它與標籤、藥丸和任何其他.nav動力導航一起使用。

這是配置文件選項卡的相關內容的一些佔位符內容。單擊另一個選項卡將切換此選項卡的可見性以供下一個選項卡使用。選項卡 JavaScript 交換類以控制內容可見性和样式。您可以將它與標籤、藥丸和任何其他.nav動力導航一起使用。

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>

為了幫助滿足您的需求，這適用於<ul>基於 - 的標記，如上所示，或任何任意“滾動您自己的”標記。請注意，如果您使用<nav>，則不應role="tablist"直接添加到它，因為這會覆蓋元素的本機角色作為導航地標。相反，切換到一個替代元素（在下面的示例中，一個簡單的<div>）並環繞<nav>它。

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

選項卡插件也適用於藥丸。

這是Home 選項卡的相關內容的一些佔位符內容。單擊另一個選項卡將切換此選項卡的可見性以供下一個選項卡使用。選項卡 JavaScript 交換類以控制內容可見性和样式。您可以將它與標籤、藥丸和任何其他.nav動力導航一起使用。

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.

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>

並與垂直藥丸。理想情況下，對於垂直選項卡，您還應該添加aria-orientation="vertical"到選項卡列表容器中。

這是Home 選項卡的相關內容的一些佔位符內容。單擊另一個選項卡將切換此選項卡的可見性以供下一個選項卡使用。選項卡 JavaScript 交換類以控制內容可見性和样式。您可以將它與標籤、藥丸和任何其他.nav動力導航一起使用。

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.

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>

可訪問性

動態選項卡式界面，如ARIA 創作實踐指南選項卡模式中所述，需要role="tablist"、role="tab"、role="tabpanel"和其他aria-屬性，以便將其結構、功能和當前狀態傳達給輔助技術（例如屏幕閱讀器）的用戶。作為最佳實踐，我們建議<button>為選項卡使用元素，因為這些是觸發動態更改的控件，而不是導航到新頁面或位置的鏈接。

根據 ARIA Authoring Practices 模式，只有當前活動的選項卡接收鍵盤焦點。當 JavaScript 插件初始化時，它將設置tabindex="-1"在所有非活動的選項卡控件上。一旦當前活動的選項卡獲得焦點，光標鍵將激活上一個/下一個選項卡，插件會相應地更改粗紗tabindex。但是，請注意，JavaScript 插件在光標鍵交互時不區分水平和垂直選項卡列表：無論選項卡列表的方向如何，上下光標都轉到上一個選項卡，上下光標轉到下一個標籤。

通常，為了方便鍵盤導航，建議讓選項卡面板本身也可聚焦，除非選項卡面板內包含有意義內容的第一個元素已經可聚焦。JavaScript 插件不會嘗試處理這方面的問題——在適當的情況下，您需要通過添加 tabindex="0"標記來顯式地使您的選項卡面板具有焦點。
標籤 JavaScript 插件 不支持包含下拉菜單的標籤界面，因為這些會導致可用性和可訪問性問題。從可用性的角度來看，當前顯示的選項卡的觸發元素不是立即可見的（因為它位於關閉的下拉菜單中）這一事實可能會導致混淆。從可訪問性的角度來看，目前還沒有明智的方法將這種結構映射到標準的 WAI ARIA 模式，這意味著輔助技術的用戶不容易理解它。

使用數據屬性

您無需編寫任何 JavaScript，只需在元素上指定data-bs-toggle="tab"或即可激活選項卡或藥丸導航。在或data-bs-toggle="pill"上使用這些數據屬性。.nav-tabs.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>

通過 JavaScript

通過 JavaScript 啟用可選項卡（每個選項卡需要單獨激活）：

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

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

您可以通過多種方式激活單個選項卡：

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

淡化效果

要使標籤淡入，請添加.fade到每個.tab-pane. 第一個選項卡窗格還必須.show使初始內容可見。

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

方法

異步方法和轉換

所有 API 方法都是異步的並開始一個轉換。他們在轉換開始但在結束之前立即返回給調用者。此外，過渡組件上的方法調用將被忽略。

有關更多信息，請參閱我們的 JavaScript 文檔。

將您的內容激活為選項卡元素。

您可以使用構造函數創建選項卡實例，例如：

const bsTab = new bootstrap.Tab('#myTab')
方法 描述
dispose 銷毀元素的選項卡。
getInstance 允許您獲取與 DOM 元素關聯的選項卡實例的靜態方法，您可以像這樣使用它bootstrap.Tab.getInstance(element)：
getOrCreateInstance 返回與 DOM 元素關聯的選項卡實例或創建一個新的選項卡實例以防它未初始化的靜態方法。你可以像這樣使用它：bootstrap.Tab.getOrCreateInstance(element).
show 選擇給定的選項卡並顯示其關聯的窗格。之前選擇的任何其他選項卡都將被取消選擇，並且其關聯的窗格被隱藏。在選項卡窗格實際顯示之前（即在事件發生之前）返回給調用者。shown.bs.tab

活動

顯示新選項卡時，事件按以下順序觸發：

  1. hide.bs.tab（在當前活動選項卡上）
  2. show.bs.tab（在待顯示的選項卡上）
  3. hidden.bs.tab（在上一個活動選項卡上，與hide.bs.tab事件相同）
  4. shown.bs.tab（在剛剛顯示的新活動選項卡上，與show.bs.tab活動相同）

如果沒有選項卡處於活動狀態，則不會觸發hide.bs.taband事件。hidden.bs.tab

事件類型 描述
hide.bs.tab 此事件在要顯示新選項卡時觸發（因此要隱藏先前的活動選項卡）。使用event.target和event.relatedTarget分別定位當前活動選項卡和新的即將活動選項卡。
hidden.bs.tab 此事件在顯示新選項卡後觸發（因此先前的活動選項卡被隱藏）。使用event.target和event.relatedTarget分別定位前一個活動選項卡和新活動選項卡。
show.bs.tab 此事件在標籤顯示時觸發，但在新標籤顯示之前。使用event.target和event.relatedTarget分別定位活動選項卡和上一個活動選項卡（如果可用）。
shown.bs.tab 顯示選項卡後，此事件在選項卡顯示時觸發。使用event.target和event.relatedTarget分別定位活動選項卡和上一個活動選項卡（如果可用）。 
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
})