跳到主要內容 跳到文檔導航
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以指示當前的活動選擇。

  • 一個活躍的項目
  • 第二項
  • 第三項
  • 第四項
  • 還有第五個
<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 才能完全禁用其點擊事件(例如,鏈接)。

  • 禁用的項目
  • 第二項
  • 第三項
  • 第四項
  • 還有第五個
<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 href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">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. Cras justo odio
  2. Cras justo odio
  3. Cras justo odio
<ol class="list-group list-group-numbered">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
</ol>

這些也適用於自定義內容。

  1. 副標題
    Cras justo odio
    14
  2. 副標題
    Cras justo odio
    14
  3. 副標題
    Cras justo odio
    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>
      Cras justo odio
    </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>
      Cras justo odio
    </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>
      Cras justo odio
    </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,甚至是像下面這樣的鍊錶組。

<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文件包含它)來擴展我們的列表組以創建本地內容的可標籤窗格。

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

節目

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

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

  tab.show()

處置

銷毀元素的選項卡。

獲取實例

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

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

獲取或創建實例

靜態方法,允許您獲取與 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.targetevent.relatedTarget分別定位活動選項卡和上一個活動選項卡(如果可用)。
shown.bs.tab 顯示選項卡後,此事件在選項卡顯示時觸發。使用event.targetevent.relatedTarget分別定位活動選項卡和上一個活動選項卡(如果可用)。
hide.bs.tab 此事件在要顯示新選項卡時觸發(因此要隱藏先前的活動選項卡)。使用event.targetevent.relatedTarget分別定位當前活動選項卡和新的即將活動選項卡。
hidden.bs.tab 此事件在顯示新選項卡後觸發(因此先前的活動選項卡被隱藏)。使用event.targetevent.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
  })
}