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 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-horizontal以跨所有斷點將列表組項的佈局從垂直更改為水平。或者，選擇一個響應式變體.list-group-horizontal-{sm|md|lg|xl}以使列表組水平從該斷點的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">
  <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>
向輔助技術傳達意義

使用顏色來添加含義僅提供視覺指示，不會傳達給輔助技術的用戶 - 例如屏幕閱讀器。確保由顏色表示的信息在內容本身（例如可見文本）中是顯而易見的，或者通過替代方式包含在內，例如隱藏在.sr-only類中的附加文本。

帶徽章

在某些實用程序的幫助下，將徽章添加到任何列表組項目以顯示未讀計數、活動等。

  • 一個列表項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 badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge badge-primary badge-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">
    <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>

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-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="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-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-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-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 啟用可選項卡列表項（每個列表項需要單獨激活）：

$('#myList a').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

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

$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third 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>

方法

$().tab

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

<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-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>
  $(function () {
    $('#myList a:last-child').tab('show')
  })
</script>

.tab('顯示')

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

$('#someListItem').tab('show')

活動

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

  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

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