Source

列表組

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

基本示例

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • 愛神前庭
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

活動項目

添加.active到 a.list-group-item以指示當前的活動選擇。

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • 愛神前庭
<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

殘障物品

添加.disabled到 a.list-group-item以使其顯示為禁用。請注意,某些元素.disabled還需要自定義 JavaScript 才能完全禁用其點擊事件(例如,鏈接)。

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • 愛神前庭
<ul class="list-group">
  <li class="list-group-item disabled">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</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">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</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">
    Cras justo odio
  </button>
  <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
  <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
</div>

沖洗

添加.list-group-flush以刪除一些邊框和圓角以在父容器(例如卡片)中邊對邊呈現列表組項目。

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • 愛神前庭
<ul class="list-group list-group-flush">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

上下文類

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

  • Dapibus ac facilisis in
  • 這是一個主要列表組項目
  • 這是一個二級列表組項目
  • 這是一個成功列表組項
  • 這是一個危險列表組項目
  • 這是一個警告列表組項
  • 這是一個信息列表組項目
  • 這是一個燈列表組項目
  • 這是一個黑名單組項目
<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</li>


  <li class="list-group-item list-group-item-primary">This is a primary list group item</li>
  <li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
  <li class="list-group-item list-group-item-success">This is a success list group item</li>
  <li class="list-group-item list-group-item-danger">This is a danger list group item</li>
  <li class="list-group-item list-group-item-warning">This is a warning list group item</li>
  <li class="list-group-item list-group-item-info">This is a info list group item</li>
  <li class="list-group-item list-group-item-light">This is a light list group item</li>
  <li class="list-group-item list-group-item-dark">This is a 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">Dapibus ac facilisis in</a>


  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">This is a primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">This is a secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">This is a success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">This is a danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">This is a warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">This is a info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">This is a light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">This is a dark list group item</a>
</div>
向輔助技術傳達意義

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

帶徽章

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

  • Cras justo odio14
  • Dapibus ac facilisis in2
  • Morbi leo risus1
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

自定義內容

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

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start 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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</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>

使用數據屬性

您無需編寫任何 JavaScript,只需data-toggle="list"在元素上指定或即可激活列表組導航。在 上使用這些數據屬性.list-group-item

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

通過 JavaScript

通過 JavaScript 啟用可選項卡列表項(每個列表項需要單獨激活):

$('#myList a').on('click', function (e) {
  e.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.targetevent.relatedTarget分別定位活動選項卡和上一個活動選項卡(如果可用)。
顯示的.bs.tab 顯示選項卡後,此事件在選項卡顯示時觸發。使用event.targetevent.relatedTarget分別定位活動選項卡和上一個活動選項卡(如果可用)。
隱藏.bs.tab 此事件在要顯示新選項卡時觸發(因此要隱藏先前的活動選項卡)。使用event.targetevent.relatedTarget分別定位當前活動選項卡和新的即將活動選項卡。
hidden.bs.tab 此事件在顯示新選項卡後觸發(因此先前的活動選項卡被隱藏)。使用event.targetevent.relatedTarget分別定位前一個活動選項卡和新活動選項卡。
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})