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

列表群組

列表群組是一種靈活且強大的元件，用於顯示一系列內容。修改並延伸它們以支援幾乎任何內容。

在此頁面上

基本範例

最基本的列表群組是一個無序清單，其中包含清單項目和適當的類別。根據需要，使用後面的選項或您自己的 CSS 來建置它。

  • 一個項目
  • 第二個項目
  • 第三項
  • 第四項
  • 第五項
html 
<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

活動項目

將 .active 加入 .list-group-item 以指示目前的活動選項。

  • 活動項目
  • 第二個項目
  • 第三項
  • 第四項
  • 第五項
html 
<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

停用項目

將 .disabled 加入 .list-group-item 以使其看起來已停用。請注意，某些具有 .disabled 的元素也需要自訂 JavaScript 才能完全停用其點擊事件（例如連結）。

  • 停用項目
  • 第二個項目
  • 第三項
  • 第四項
  • 第五項
html 
<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

使用 <a> 或 <button> 建立可操作的清單群組項目，並透過加入 .list-group-item-action 來設定滑鼠移入、停用和活動狀態。我們將這些偽類別分開，以確保由非互動元素（例如 <li> 或 <div>）組成的清單群組不會提供點擊或輕觸功能。

請務必不要在此處使用標準的 .btn 類別。

目前的連結項目 第二個連結項目 第三個連結項目 第四個連結項目 已停用的連結項目
html 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a class="list-group-item list-group-item-action disabled" aria-disabled="true">A disabled link item</a>
</div>

使用 <button> 時，您也可以使用 disabled 屬性，而不是 .disabled 類別。很遺憾，<a> 不支援 disabled 屬性。

html 
<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second button item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>

清除

加入 .list-group-flush 以移除部分邊框與圓角，讓清單群組項目在父容器中從邊緣到邊緣呈現（例如卡片）。

  • 一個項目
  • 第二個項目
  • 第三項
  • 第四項
  • 第五項
html 
<ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

編號

加入 .list-group-numbered 修飾類別（並選擇性地使用 <ol> 元素），以選擇編號清單群組項目。數字透過 CSS 產生（與 <ol> 的預設瀏覽器樣式不同），以便在清單群組項目中獲得更好的放置，並允許更好的自訂。

數字由 <ol> 上的 counter-reset 產生，然後使用 <li> 上的 ::before 偽元素和 counter-increment 與 content 進行樣式設定和放置。

  1. 一個清單項目
  2. 一個清單項目
  3. 一個清單項目
html 
<ol class="list-group list-group-numbered">
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
</ol>

這些也適用於自訂內容。

  1. 小標題
    清單項目內容
    14
  2. 小標題
    清單項目內容
    14
  3. 小標題
    清單項目內容
    14
html 
<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge text-bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge text-bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge text-bg-primary rounded-pill">14</span>
  </li>
</ol>

水平

加入 .list-group-horizontal 以將清單群組項目的配置從垂直變更為所有中斷點的水平。或者，選擇一個回應式變體 .list-group-horizontal-{sm|md|lg|xl|xxl}，以從該中斷點的 min-width 開始建立水平清單群組。目前水平清單群組無法與清除清單群組結合。

專業提示：想要在水平時讓清單群組項目等寬嗎？在每個清單群組項目中加入 .flex-fill。

  • 一個項目
  • 第二個項目
  • 第三項
  • 一個項目
  • 第二個項目
  • 第三項
  • 一個項目
  • 第二個項目
  • 第三項
  • 一個項目
  • 第二個項目
  • 第三項
  • 一個項目
  • 第二個項目
  • 第三項
  • 一個項目
  • 第二個項目
  • 第三項
html 
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xxl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

變體

注意！自 v5.3.0 起，list-group-item-variant() Sass 混用已棄用。現在，清單群組項目變體已在其 CSS 變數中覆寫 Sass 迴圈。

使用情境式類別，以使用狀態背景和顏色設定清單項目樣式。

  • 一個簡單的預設清單群組項目
  • 一個簡單的主要清單群組項目
  • 一個簡單的次要清單群組項目
  • 一個簡單的成功清單群組項目
  • 一個簡單的危險清單群組項目
  • 一個簡單的警告清單群組項目
  • 一個簡單的資訊清單群組項目
  • 一個簡單的淺色清單群組項目
  • 一個簡單的深色清單群組項目
html 
<ul class="list-group">
  <li class="list-group-item">A simple default list group item</li>

  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info">A simple info list group item</li>
  <li class="list-group-item list-group-item-light">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

情境式類別也適用於 .list-group-item-action，用於 <a> 和 <button> 元素。請注意，此處新增了懸停樣式，而前一個範例中沒有。也支援 .active 狀態；套用它以指出情境式清單群組項目中的作用中選取。

一個簡單的預設清單群組項目 一個簡單的主要清單群組項目 一個簡單的次要清單群組項目 一個簡單的成功清單群組項目 一個簡單的危險清單群組項目 一個簡單的警告清單群組項目 一個簡單的資訊清單群組項目 一個簡單的淺色清單群組項目 一個簡單的深色清單群組項目
html 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>
無障礙提示：僅使用顏色來傳達意義只會提供視覺指示，這無法傳達給螢幕閱讀器等輔助技術的使用者。請確保意義從內容本身即可明顯看出（例如，可見文字具有 足夠 色彩對比），或透過其他方式包含，例如使用 .visually-hidden 類別隱藏的附加文字。

帶有徽章

在任何列表群組項目中加入徽章，以顯示未讀計數、活動等，這需要借助一些 工具程式。

  • 列表項目 14
  • 第二個列表項目 2
  • 第三個列表項目 1
html 
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge text-bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge text-bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge text-bg-primary rounded-pill">1</span>
  </li>
</ul>

自訂內容

在其中加入幾乎任何 HTML，甚至像下方連結的列表群組，這需要借助 彈性方塊工具程式。

列表群組項目標題
3 天前

段落中的一些佔位符內容。

以及一些小字。
列表群組項目標題
3 天前

段落中的一些佔位符內容。

以及一些灰階小字。
列表群組項目標題
3 天前

段落中的一些佔位符內容。

以及一些灰階小字。
html 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small>And some small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-body-secondary">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-body-secondary">And some muted small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-body-secondary">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-body-secondary">And some muted small print.</small>
  </a>
</div>

核取方塊和圓形按鈕

將 Bootstrap 的核取方塊和無線按鈕置於清單群組項目中，並依需要自訂。你可以使用它們而不用 <label>，但請記得包含 aria-label 屬性和值以利於無障礙存取。

html 
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
    <label class="form-check-label" for="firstCheckbox">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
    <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
    <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
  </li>
</ul>
html 
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">First radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">Second radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">Third radio</label>
  </li>
</ul>

你可以在 <label> 上使用 .stretched-link，使整個清單群組項目可按一下。

html 
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
    <label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched">
    <label class="form-check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
    <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
  </li>
</ul>

CSS

變數

已於 v5.2.0 中新增

作為 Bootstrap 不斷演進的 CSS 變數方法的一部分，清單群組現在在 .list-group 上使用本機 CSS 變數，以增強即時自訂功能。CSS 變數的值透過 Sass 設定，因此 Sass 自訂功能仍然受到支援。

scss/_list-group.scss 
--#{$prefix}list-group-color: #{$list-group-color};
--#{$prefix}list-group-bg: #{$list-group-bg};
--#{$prefix}list-group-border-color: #{$list-group-border-color};
--#{$prefix}list-group-border-width: #{$list-group-border-width};
--#{$prefix}list-group-border-radius: #{$list-group-border-radius};
--#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
--#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
--#{$prefix}list-group-action-color: #{$list-group-action-color};
--#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
--#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
--#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
--#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
--#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
--#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
--#{$prefix}list-group-active-color: #{$list-group-active-color};
--#{$prefix}list-group-active-bg: #{$list-group-active-bg};
--#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};

Sass 變數

scss/_variables.scss 
$list-group-color:                  var(--#{$prefix}body-color);
$list-group-bg:                     var(--#{$prefix}body-bg);
$list-group-border-color:           var(--#{$prefix}border-color);
$list-group-border-width:           var(--#{$prefix}border-width);
$list-group-border-radius:          var(--#{$prefix}border-radius);

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
// fusv-disable
$list-group-item-bg-scale:          -80%; // Deprecated in v5.3.0
$list-group-item-color-scale:       40%; // Deprecated in v5.3.0
// fusv-enable

$list-group-hover-bg:               var(--#{$prefix}tertiary-bg);
$list-group-active-color:           $component-active-color;
$list-group-active-bg:              $component-active-bg;
$list-group-active-border-color:    $list-group-active-bg;

$list-group-disabled-color:         var(--#{$prefix}secondary-color);
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           var(--#{$prefix}secondary-color);
$list-group-action-hover-color:     var(--#{$prefix}emphasis-color);

$list-group-action-active-color:    var(--#{$prefix}body-color);
$list-group-action-active-bg:       var(--#{$prefix}secondary-bg);

Sass mixin

已於 v5.3.0 中棄用
scss/mixins/_list-group.scss 
@mixin list-group-item-variant($state, $background, $color) {
  .list-group-item-#{$state} {
    color: $color;
    background-color: $background;

    &.list-group-item-action {
      &:hover,
      &:focus {
        color: $color;
        background-color: shade-color($background, 10%);
      }

      &.active {
        color: $white;
        background-color: $color;
        border-color: $color;
      }
    }
  }
}

Sass 迴圈

產生修改器類別的迴圈，並覆寫 CSS 變數。

scss/_list-group.scss 
// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state in map-keys($theme-colors) {
  .list-group-item-#{$state} {
    --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
    --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
    --#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
  }
}

JavaScript 行為

使用標籤 JavaScript 外掛程式（個別包含或透過已編譯的 bootstrap.js 檔案包含）來延伸我們的清單群組，以建立可切換標籤的本機內容窗格。

一些與「首頁」相關的段落中的佔位符內容。還有一些更多內容，用於在此補充和填滿這個標籤面板。在實際應用中，您顯然會在此處擁有更多實際內容。而不仅仅是文字。它可以是任何東西，真的。文字、圖片、表單。

一些與「個人資料」相關的段落佔位內容。還有更多內容，用於填滿此分頁面板。在實際應用中，您顯然會有更多實際內容。而且不只是文字。它可以是任何東西，真的。文字、圖片、表單。

一些與「訊息」相關的段落佔位內容。還有更多內容，用於填滿此分頁面板。在實際應用中，您顯然會有更多實際內容。而且不只是文字。它可以是任何東西，真的。文字、圖片、表單。

一些與「設定」相關的段落佔位內容。還有更多內容，用於填滿此分頁面板。在實際應用中，您顯然會有更多實際內容。而且不只是文字。它可以是任何東西，真的。文字、圖片、表單。

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

使用資料屬性

您只需指定 data-bs-toggle="list" 或在元素上，即可啟用列表群組導覽，而無需撰寫任何 JavaScript。對 .list-group-item 使用這些資料屬性。

<div role="tabpanel">
  <!-- List group -->
  <div class="list-group" id="myList" role="tablist">
    <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
  </div>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane active" id="home" role="tabpanel">...</div>
    <div class="tab-pane" id="profile" role="tabpanel">...</div>
    <div class="tab-pane" id="messages" role="tabpanel">...</div>
    <div class="tab-pane" id="settings" role="tabpanel">...</div>
  </div>
</div>

透過 JavaScript

透過 JavaScript 啟用可標籤化的列表項目（每個列表項目需要個別啟用）

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

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

您可以透過多種方式啟用個別列表項目

const triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
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">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel">...</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 tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(tabElm => {
  tabElm.addEventListener('shown.bs.tab', event => {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
})