在 GitHub 上檢視

列表群組

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

基本範例

最基本的列表群組是一個無序清單，其中包含清單項目和適當的類別。根據需要，使用後面的選項或您自己的 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 加入 .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 加入 .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> 或 <button> 透過加入 .list-group-item-action 來建立可操作的列表群組項目，其中包含滑鼠移入、已停用和目前的狀態。我們將這些偽類別分開，以確保由非互動元素（例如 <li> 或 <div>）組成的列表群組不會提供點擊或輕觸功能。

請務必在此處不使用標準的 .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> 時，您也可以使用 disabled 屬性，而不是 .disabled 類別。遺憾的是，<a> 不支援 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 檔案），將我們的列表群組延伸，以建立本地內容的可標籤窗格。

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

一些與「個人資料」相關的段落佔位內容。以及更多內容，僅用於填補並填滿此分頁面板。在製作時，您顯然會有更多實際內容。而不仅仅是文字。它可以是任何東西，真的。文字、圖片、表格。

一些與「訊息」相關的段落佔位內容。以及更多內容，僅用於填補並填滿此分頁面板。在製作時，您顯然會有更多實際內容。而不仅仅是文字。它可以是任何東西，真的。文字、圖片、表格。

一些與「設定」相關的段落佔位內容。以及更多內容，僅用於填補並填滿此分頁面板。在製作時，您顯然會有更多實際內容。而不仅仅是文字。它可以是任何東西，真的。文字、圖片、表格。

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

使用資料屬性

您只需指定 data-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-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

啟用清單項目元素和內容容器。分頁應具有 data-target 或 href，目標為 DOM 中的容器節點。

<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(‘show’)

選取指定的清單項目並顯示其關聯的面板。任何先前選取的其他清單項目將會取消選取，且其關聯的面板將會隱藏。在分頁面板實際顯示之前返回呼叫者（例如，在 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.tab 和 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 分別針對先前活動的分頁和新活動的分頁。 
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})