跳至主要內容 跳至文件導覽
在 GitHub 上檢視

導覽和標籤

如何使用 Bootstrap 內建的導覽元件的說明文件和範例。

在此頁面上

基本導覽

Bootstrap 中提供的導覽共用一般的標記和樣式，從基本的 .nav 類別到啟用和停用狀態。切換修改器類別可在各個樣式之間切換。

基本 .nav 元件使用彈性盒狀模型建置，並提供建置各種導覽元件的強大基礎。它包含一些樣式覆寫（用於處理清單），一些連結內距以提供較大的點擊區域，以及基本的停用樣式。

基礎 .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" aria-disabled="true">Disabled</a>
  </li>
</ul>

整個過程中都使用類別，因此您的標記可以非常靈活。使用如上方的 <ul>，如果項目順序很重要，則使用 <ol>，或使用 <nav> 元素自行建立。由於 .nav 使用 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" aria-disabled="true">Disabled</a>
</nav>

可用樣式

使用修改器和工具程式變更 .nav 元件的樣式。視需要混合和搭配，或自行建立。

水平對齊

使用 彈性盒工具程式 變更導覽的水平對齊。預設情況下，導覽會靠左對齊，但您可以輕鬆將它們變更為置中或靠右對齊。

使用 .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" aria-disabled="true">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" aria-disabled="true">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" aria-disabled="true">Disabled</a>
  </li>
</ul>

與以往相同，垂直導覽也可以不用 <ul>。

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" aria-disabled="true">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" aria-disabled="true">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" aria-disabled="true">Disabled</a>
  </li>
</ul>

底線

使用相同的 HTML，但改用 .nav-underline

html 
<ul class="nav nav-underline">
  <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" aria-disabled="true">Disabled</a>
  </li>
</ul>

填滿並置中

使用兩個修改器類別之一，強制您的 .nav 內容延伸至全部可用的寬度。若要使用 .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" aria-disabled="true">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" aria-disabled="true">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" aria-disabled="true">Disabled</a>
  </li>
</ul>

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

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" aria-disabled="true">Disabled</a>
</nav>

使用彈性公用程式

如果您需要具備回應式導覽的變化，請考慮使用一系列 彈性盒狀模型公用程式。雖然較為詳細，但這些公用程式在回應式中斷點中提供更佳的自訂功能。在以下範例中，我們的導覽將堆疊在最低中斷點上，然後適應從小中斷點開始填滿可用寬度的水平版面配置。

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" aria-disabled="true">Disabled</a>
</nav>

關於無障礙

如果您使用 nav 提供導覽列，請務必將 role="navigation" 加入 <ul> 最合乎邏輯的父層容器，或在整個導覽周圍加上 <nav> 元素。請勿將角色加入 <ul> 本身，因為這會導致輔助技術無法將其宣告為實際清單。

請注意，導覽列即使視覺上以 .nav-tabs 類別設定為標籤樣式，不應給予 role="tablist"、role="tab" 或 role="tabpanel" 屬性。這些屬性僅適用於動態標籤介面，如 ARIA 編寫實務指南標籤模式 中所述。請參閱本區段中 JavaScript 行為，以取得動態標籤介面的範例。由於我們的 JavaScript 會透過在活動標籤上加入 aria-selected="true" 來處理選取狀態，因此動態標籤介面不需要 aria-current 屬性。

使用下拉式選單

使用一些額外的 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" aria-disabled="true">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" aria-disabled="true">Disabled</a>
  </li>
</ul>

CSS

變數

新增於 v5.2.0

作為 Bootstrap 不斷演進的 CSS 變數方法的一部份，導覽列現在使用 `nav`、`nav-tabs` 和 `nav-pills` 上的區域 CSS 變數，以增強即時自訂功能。CSS 變數的值透過 Sass 設定，因此 Sass 自訂功能仍受支援。

在 `nav` 基底類別上

scss/_nav.scss 
--#{$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` 修改器類別上

scss/_nav.scss 
--#{$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` 修改器類別上

scss/_nav.scss 
--#{$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};
新增於 v5.3.0

在 `nav-underline` 修改器類別上

scss/_nav.scss 
--#{$prefix}nav-underline-gap: #{$nav-underline-gap};
--#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
--#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};

Sass 變數

scss/_variables.scss 
$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:           var(--#{$prefix}secondary-color);
$nav-link-focus-box-shadow:         $focus-ring-box-shadow;

$nav-tabs-border-color:             var(--#{$prefix}border-color);
$nav-tabs-border-width:             var(--#{$prefix}border-width);
$nav-tabs-border-radius:            var(--#{$prefix}border-radius);
$nav-tabs-link-hover-border-color:  var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color;
$nav-tabs-link-active-color:        var(--#{$prefix}emphasis-color);
$nav-tabs-link-active-bg:           var(--#{$prefix}body-bg);
$nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg;

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

$nav-underline-gap:                 1rem;
$nav-underline-border-width:        .125rem;
$nav-underline-link-active-color:   var(--#{$prefix}emphasis-color);

JavaScript 行為

使用分頁 JavaScript 外掛程式（個別包含或透過已編譯的 `bootstrap.js` 檔案包含）來擴充我們的導覽分頁和藥丸，以建立區域內容的可分頁窗格。

這是 首頁分頁 的關聯內容的一些佔位符內容。按一下另一個分頁會切換此分頁的顯示/隱藏狀態。分頁 JavaScript 會切換類別來控制內容的顯示/隱藏狀態和樣式。您可以在分頁、藥丸和任何其他由 `nav` 提供動力的導覽中使用它。

這是 個人資料分頁 的關聯內容的一些佔位符內容。按一下另一個分頁會切換此分頁的顯示/隱藏狀態。分頁 JavaScript 會切換類別來控制內容的顯示/隱藏狀態和樣式。您可以在分頁、藥丸和任何其他由 `nav` 提供動力的導覽中使用它。

這是連絡人分頁關聯內容的一些佔位符內容。按一下另一個分頁，會切換此分頁的能見度。分頁 JavaScript 會交換類別，以控制內容能見度和樣式。您可以將其與分頁、藥丸以及任何其他由 .nav 提供動力的導覽搭配使用。

這是已停用分頁關聯內容的一些佔位符內容。

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

分頁外掛程式也適用於藥丸。

這是 首頁分頁 的關聯內容的一些佔位符內容。按一下另一個分頁會切換此分頁的顯示/隱藏狀態。分頁 JavaScript 會切換類別來控制內容的顯示/隱藏狀態和樣式。您可以在分頁、藥丸和任何其他由 `nav` 提供動力的導覽中使用它。

這是 個人資料分頁 的關聯內容的一些佔位符內容。按一下另一個分頁會切換此分頁的顯示/隱藏狀態。分頁 JavaScript 會切換類別來控制內容的顯示/隱藏狀態和樣式。您可以在分頁、藥丸和任何其他由 `nav` 提供動力的導覽中使用它。

這是連絡人分頁關聯內容的一些佔位符內容。按一下另一個分頁，會切換此分頁的能見度。分頁 JavaScript 會交換類別，以控制內容能見度和樣式。您可以將其與分頁、藥丸以及任何其他由 .nav 提供動力的導覽搭配使用。

這是已停用分頁關聯內容的一些佔位符內容。

<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" 加入分頁清單容器。

這是 首頁分頁 的關聯內容的一些佔位符內容。按一下另一個分頁會切換此分頁的顯示/隱藏狀態。分頁 JavaScript 會切換類別來控制內容的顯示/隱藏狀態和樣式。您可以在分頁、藥丸和任何其他由 `nav` 提供動力的導覽中使用它。

這是 個人資料分頁 的關聯內容的一些佔位符內容。按一下另一個分頁會切換此分頁的顯示/隱藏狀態。分頁 JavaScript 會切換類別來控制內容的顯示/隱藏狀態和樣式。您可以在分頁、藥丸和任何其他由 `nav` 提供動力的導覽中使用它。

這是已停用分頁關聯內容的一些佔位符內容。

這是訊息分頁關聯內容的一些佔位符內容。按一下另一個分頁，會切換此分頁的能見度。分頁 JavaScript 會交換類別，以控制內容能見度和樣式。您可以將其與分頁、藥丸以及任何其他由 .nav 提供動力的導覽搭配使用。

這是設定分頁關聯內容的一些佔位符內容。按一下另一個分頁，會切換此分頁的能見度。分頁 JavaScript 會交換類別，以控制內容能見度和樣式。您可以將其與分頁、藥丸以及任何其他由 .nav 提供動力的導覽搭配使用。

<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 撰寫實務範例，只有目前作用中的索引標籤會接收鍵盤焦點。當 JavaScript 外掛程式初始化時，會在所有非作用中的索引標籤控制項上設定 tabindex="-1"。當目前作用中的索引標籤有焦點時，游標鍵會作用於前一個/下一個索引標籤。Home 和 End 鍵分別會作用於第一個和最後一個索引標籤。外掛程式會變更 流動 tabindex。不過，請注意，在游標鍵互動時，JavaScript 外掛程式不會區分水平和垂直索引標籤清單：無論索引標籤清單的方向為何，向上 和 向左的游標都會移到前一個索引標籤，向下 和 向右的游標都會移到下一個索引標籤。

一般來說，為了促進鍵盤導覽，建議讓索引標籤面板本身也可以取得焦點，除非索引標籤面板中包含有意義內容的第一個元素已經可以取得焦點。JavaScript 外掛程式不會嘗試處理這個面向，在適當的情況下，您需要透過在標記中加入 tabindex="0" 來明確讓索引標籤面板可以取得焦點。
索引標籤 JavaScript 外掛程式不支援包含下拉式功能表的索引標籤介面，因為這會造成可用性和可近性問題。從可用性的角度來看，目前顯示的索引標籤觸發元素並未立即可見（因為它在關閉的下拉式功能表中），這可能會造成混淆。從可近性的角度來看，目前沒有明智的方法可以將這種建構對應到標準 WAI ARIA 範例，這表示它無法輕易讓輔助技術的使用者理解。

使用資料屬性

您可以透過在元素上指定 data-bs-toggle="tab" 或 data-bs-toggle="pill" 來啟用標籤或藥丸導覽，而無需撰寫任何 JavaScript。在 .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.tab 和 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
})