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

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac 爱神前庭 
<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状态；应用它来指示上下文列表组项上的活动选择。

Dapibus ac facilisis in 这是一个主要列表组项目 这是一个二级列表组项目 这是一个成功列表组项 这是一个危险列表组项目 这是一个警告列表组项 这是一个信息列表组项目 这是一个灯列表组项目 这是一个黑名单组项目 
<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，甚至是像下面这样的链表组。

列出组项目标题
3天前

Donec id elit non mi porta gravida 在 eget metus。Maecenas sed diam eget risus varius blandit。

Donec id elit non mi porta。
列出组项目标题
3天前

Donec id elit non mi porta gravida 在 eget metus。Maecenas sed diam eget risus varius blandit。

Donec id elit non mi porta。
列出组项目标题
3天前

Donec id elit non mi porta gravida 在 eget metus。Maecenas sed diam eget risus varius blandit。

Donec id elit non mi porta。 
<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文件包含它）来扩展我们的列表组以创建本地内容的可标签窗格。

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor。Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut。Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla。Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor。Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim。

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

<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.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 (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})