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

列表組

列表組是用於顯示一系列內容的靈活而強大的組件。修改和擴展它們以支持其中的任何內容。

在本頁面

基本示例

最基本的列表組是一個包含列表項和適當類的無序列表。使用以下選項或根據需要使用您自己的 CSS 構建它。

  • 一個物品
  • 第二項
  • 第三項
  • 第四項
  • 還有第五個
<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到 a.list-group-item以指示當前的活動選擇。

  • 一個活躍的項目
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
<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到 a.list-group-item以使其顯示為禁用。請注意，某些元素.disabled還需要自定義 JavaScript 才能完全禁用其點擊事件（例如，鏈接）。

  • 禁用的項目
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
<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>s 或<button>s 通過添加來創建具有懸停、禁用和活動狀態的可操作.list-group-item-action列表組項。我們將這些偽類分開，以確保由非交互元素（如<li>s 或<div>s）組成的列表組不會提供點擊或點擊功能。

一定不要在這裡使用標準.btn類。

當前鏈接項 第二個鏈接項 第三個鏈接項 第四個鏈接項 禁用的鏈接項 
<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">A disabled link item</a>
</div>

使用<button>s，您還可以使用disabled屬性而不是.disabled類。可悲的是，<a>s 不支持 disabled 屬性。

<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 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以刪除一些邊框和圓角以在父容器（例如卡片）中邊對邊呈現列表組項目。

  • 一個物品
  • 第二項
  • 第三項
  • 第四項
  • 還有第五個
<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>s 默認瀏覽器樣式），以便更好地放置在列表組項目中並允許更好的自定義。

數字由counter-reseton生成<ol>，然後在with和上使用::before偽元素設置樣式和放置。<li>counter-incrementcontent

  1. 一個列表項
  2. 一個列表項
  3. 一個列表項
<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 
<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 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 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 bg-primary rounded-pill">14</span>
  </li>
</ol>

水平的

添加.list-group-horizontal以跨所有斷點將列表組項的佈局從垂直更改為水平。或者，選擇一個響應式變體.list-group-horizontal-{sm|md|lg|xl|xxl}以使列表組水平從該斷點的min-width. 目前水平列表組不能與刷新列表組組合。

專業提示：想要水平時等寬列表組項目？添加.flex-fill到每個列表組項目。

  • 一個物品
  • 第二項
  • 第三項
  • 一個物品
  • 第二項
  • 第三項
  • 一個物品
  • 第二項
  • 第三項
  • 一個物品
  • 第二項
  • 第三項
  • 一個物品
  • 第二項
  • 第三項
  • 一個物品
  • 第二項
  • 第三項
<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>

上下文類

使用上下文類來設置具有狀態背景和顏色的列表項的樣式。

  • 一個簡單的默認列表組項
  • 一個簡單的主要列表組項
  • 一個簡單的二級列表組項
  • 一個簡單的成功列表組項
  • 一個簡單的危險列表組項
  • 一個簡單的警告列表組項
  • 一個簡單的信息列表組項
  • 一個簡單的燈光列表組項
  • 一個簡單的黑名單組項
<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. 請注意，此處添加的懸停樣式在前面的示例中沒有出現。還支持.active狀態；應用它來指示上下文列表組項上的活動選擇。

一個簡單的默認列表組項 一個簡單的主要列表組項 一個簡單的二級列表組項 一個簡單的成功列表組項 一個簡單的危險列表組項 一個簡單的警告列表組項 一個簡單的信息列表組項 一個簡單的燈光列表組項 一個簡單的黑名單組項 
<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 
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge 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 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 bg-primary rounded-pill">1</span>
  </li>
</ul>

自定義內容

在flexbox 實用程序的幫助下，幾乎可以在其中添加任何 HTML，甚至是像下面這樣的鍊錶組。

列出組項目標題
3天前

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

還有一些小字。
列出組項目標題
3天前

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

還有一些靜音的小字。
列出組項目標題
3天前

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

還有一些靜音的小字。 
<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-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">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-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
</div>

複選框和收音機

將 Bootstrap 的複選框和單選放在列表組項目中，並根據需要進行自定義。您可以在沒有<label>s 的情況下使用它們，但請記住包含aria-label可訪問性的屬性和值。

  • 第一個複選框
  • 第二個複選框
  • 第三個複選框
  • 第四個複選框
  • 第五個複選框
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    First checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Second checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Third checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fourth checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fifth checkbox
  </li>
</ul>

如果你想要<label>s 作為.list-group-item大命中區域，你也可以這樣做。

<div class="list-group">
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    First checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Second checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Third checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fourth checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fifth checkbox
  </label>
</div>

薩斯

變量

$list-group-color:                  $gray-900;
$list-group-bg:                     $white;
$list-group-border-color:           rgba($black, .125);
$list-group-border-width:           $border-width;
$list-group-border-radius:          $border-radius;

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
$list-group-item-bg-scale:          -80%;
$list-group-item-color-scale:       40%;

$list-group-hover-bg:               $gray-100;
$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:         $gray-600;
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           $gray-700;
$list-group-action-hover-color:     $list-group-action-color;

$list-group-action-active-color:    $body-color;
$list-group-action-active-bg:       $gray-200;

混合

與 結合使用$theme-colors以生成s的上下文變體類。.list-group-item

@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;
      }
    }
  }
}

環形

list-group-item-variant()使用mixin生成修飾符類的循環。

// 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, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

JavaScript 行為

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

與“主頁”相關的段落中的一些佔位符內容。還有一些更多的內容，在這裡只是用來填充和填充這個選項卡面板。在生產中，您顯然會在這裡擁有更多真實的內容。而不僅僅是文字。它可以是任何東西，真的。文本、圖像、表格。

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

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

使用數據屬性

您無需編寫任何 JavaScript，只需data-bs-toggle="list"在元素上指定或即可激活列表組導航。在 上使用這些數據屬性.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 啟用可選項卡列表項（每個列表項需要單獨激活）：

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

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

您可以通過多種方式激活單個列表項：

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

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

方法

constructor

激活列表項元素和內容容器。Tab 應該在 DOM 中具有一個data-bs-target或一個href目標容器節點。

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

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

<script>
  var firstTabEl = document.querySelector('#myTab a:last-child')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

show

選擇給定的列表項並顯示其關聯的窗格。先前選擇的任何其他列表項都將變為未選擇，並且其關聯的窗格被隱藏。在選項卡窗格實際顯示之前（例如，在事件發生之前）返回給調用者。shown.bs.tab

  var someListItemEl = document.querySelector('#someListItem')
  var tab = new bootstrap.Tab(someListItemEl)

  tab.show()

dispose

銷毀元素的選項卡。

getInstance

允許您獲取與 DOM 元素關聯的選項卡實例的靜態方法

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

靜態方法，允許您獲取與 DOM 元素關聯的選項卡實例，或者在未初始化的情況下創建一個新實例

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

活動

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

  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

事件類型 描述
show.bs.tab 此事件在標籤顯示時觸發，但在新標籤顯示之前。使用event.target和event.relatedTarget分別定位活動選項卡和上一個活動選項卡（如果可用）。
shown.bs.tab 顯示選項卡後，此事件在選項卡顯示時觸發。使用event.target和event.relatedTarget分別定位活動選項卡和上一個活動選項卡（如果可用）。
hide.bs.tab 此事件在要顯示新選項卡時觸發（因此要隱藏先前的活動選項卡）。使用event.target和event.relatedTarget分別定位當前活動選項卡和新的即將活動選項卡。
hidden.bs.tab 此事件在顯示新選項卡後觸發（因此先前的活動選項卡被隱藏）。使用event.target和event.relatedTarget分別定位前一個活動選項卡和新活動選項卡。 
var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(function(tabElm) {
  tabElm.addEventListener('shown.bs.tab', function (event) {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
}