列表组(List-group)

列表组是一个灵活而且强大的组件，不仅仅可以用来显示简单的元素列表，还可以通过定义显示复杂的内容。

基本示例

最基本的列表组就是一个无序列表、带有几个列表项以及适当的样式定义类。在此基础上可以使用下列选项，或根据你自己的需要调整CSS。

列表组(List-group) - 图1

  1. <ul class="list-group">
  2.   <li class="list-group-item">Cras justo odio</li>
  3.   <li class="list-group-item">Dapibus ac facilisis in</li>
  4.   <li class="list-group-item">Morbi leo risus</li>
  5.   <li class="list-group-item">Porta ac consectetur ac</li>
  6.   <li class="list-group-item">Vestibulum at eros</li>
  7. </ul>

.active列表(启用)状态指示

添加 .active 到 .list-group-item 下的其中一行或多行，以指示当前有效的选择状态。

列表组(List-group) - 图2

  1. <ul class="list-group">
  2.   <li class="list-group-item active">Cras justo odio</li>
  3.   <li class="list-group-item">Dapibus ac facilisis in</li>
  4.   <li class="list-group-item">Morbi leo risus</li>
  5.   <li class="list-group-item">Porta ac consectetur ac</li>
  6.   <li class="list-group-item">Vestibulum at eros</li>
  7. </ul>

.disabled列表(禁用)状态指示

添加 .disabled 到 .list-group-item 下的其中一行或多行，以显示出 禁用 状态。注意：一些带有 .disabled的元素还需要自定义JavaScript脚本才能完全禁用其点击事件（如链接）。

列表组(List-group) - 图3

  1. <ul class="list-group">
  2.   <li class="list-group-item disabled">Cras justo odio</li>
  3.   <li class="list-group-item">Dapibus ac facilisis in</li>
  4.   <li class="list-group-item">Morbi leo risus</li>
  5.   <li class="list-group-item">Porta ac consectetur ac</li>
  6.   <li class="list-group-item">Vestibulum at eros</li>
  7. </ul>

链接和按钮

使用 <a>或 <button>来创建具有 hover、禁用、悬停和活动状态的列表组.list-group-item-action，我们分离这些Class样式，以确保由非交互元素组成的列表群组(如 <li>或 <div>)不提供可点击或触击（即可以用一个父<div>代替<ul>-译者注）。

请务必 不要在这里使用 .btn 标准样式。

列表组(List-group) - 图4

  1. <div class="list-group">
  2.   <a href="#" class="list-group-item list-group-item-action active">
  3.     Cras justo odio
  4.   </a>
  5.   <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  6.   <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  7.   <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  8.   <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
  9. </div>

使用<button>元素，你还可以使用disabled 属性来达到禁用状态指示（或引用 .disabled 样式），不过这一属性不支持HTML5中的 <a>标签。

列表组(List-group) - 图5

  1. <div class="list-group">
  2.   <button type="button" class="list-group-item list-group-item-action active">
  3.     Cras justo odio
  4.   </button>
  5.   <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
  6.   <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
  7.   <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
  8.   <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
  9. </div>

Flush紧致贴齐

加入.list-group-flush选择器，可以实现移除部分边框以及圆角，从而产生边缘贴齐的列表组，这在诸如Card卡片等容器中很实用（达成更好的呈现效果）。

列表组(List-group) - 图6

  1. <ul class="list-group list-group-flush">
  2.   <li class="list-group-item">Cras justo odio</li>
  3.   <li class="list-group-item">Dapibus ac facilisis in</li>
  4.   <li class="list-group-item">Morbi leo risus</li>
  5.   <li class="list-group-item">Porta ac consectetur ac</li>
  6.   <li class="list-group-item">Vestibulum at eros</li>
  7. </ul>

水平

添加.list-group-horizontal以在所有断点上将列表组项的布局从垂直更改为水平. 或者，选择一个响应变量.list-group-horizontal-{sm|md|lg|xl}使列表组从该断点的min-width开始水平. 当前水平列表组不能与刷新列表组组合.

提示:水平时想要等宽列表组项吗？ 将.flex-fill 添加到每个列表组项目.

列表组(List-group) - 图7

  1. <ul class="list-group list-group-horizontal">
  2.   <li class="list-group-item">Cras justo odio</li>
  3.   <li class="list-group-item">Dapibus ac facilisis in</li>
  4.   <li class="list-group-item">Morbi leo risus</li>
  5. </ul>

列表组(List-group) - 图8

  1. <ul class="list-group list-group-horizontal-sm">
  2.   <li class="list-group-item">Cras justo odio</li>
  3.   <li class="list-group-item">Dapibus ac facilisis in</li>
  4.   <li class="list-group-item">Morbi leo risus</li>
  5. </ul>

列表组(List-group) - 图9

  1. <ul class="list-group list-group-horizontal-md">
  2.   <li class="list-group-item">Cras justo odio</li>
  3.   <li class="list-group-item">Dapibus ac facilisis in</li>
  4.   <li class="list-group-item">Morbi leo risus</li>
  5. </ul>

列表组(List-group) - 图10

  1. <ul class="list-group list-group-horizontal-lg">
  2.   <li class="list-group-item">Cras justo odio</li>
  3.   <li class="list-group-item">Dapibus ac facilisis in</li>
  4.   <li class="list-group-item">Morbi leo risus</li>
  5. </ul>

列表组(List-group) - 图11

  1. <ul class="list-group list-group-horizontal-xl">
  2.   <li class="list-group-item">Cras justo odio</li>
  3.   <li class="list-group-item">Dapibus ac facilisis in</li>
  4.   <li class="list-group-item">Morbi leo risus</li>
  5.   </ul>

上下文语境颜色呈现样式

使用情景式class样式来设计具有状态背景和颜色的列表组，呈现默认或链接状态。

列表组(List-group) - 图12

  1. <ul class="list-group">
  2.   <li class="list-group-item">Dapibus ac facilisis in</li>
  3.   <li class="list-group-item list-group-item-primary">This is a primary list group item</li>
  4.   <li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
  5.   <li class="list-group-item list-group-item-success">This is a success list group item</li>
  6.   <li class="list-group-item list-group-item-danger">This is a danger list group item</li>
  7.   <li class="list-group-item list-group-item-warning">This is a warning list group item</li>
  8.   <li class="list-group-item list-group-item-info">This is a info list group item</li>
  9.   <li class="list-group-item list-group-item-light">This is a light list group item</li>
  10.   <li class="list-group-item list-group-item-dark">This is a dark list group item</li>
  11. </ul>

情景式class也可以使用 .list-group-item-action样式，注意，在上述示例中，不存在hover样式指示器，事实上它是支持的，而且还支持e .active 状态指示—我们可以应用它们在上下文情景列表组的项目上进行活动状态选择指示。

列表组(List-group) - 图13

  1. <div class="list-group">
  2.   <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  5.   <a href="#" class="list-group-item list-group-item-action list-group-item-primary">This is a primary list group item</a>
  6.   <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">This is a secondary list group item</a>
  7.   <a href="#" class="list-group-item list-group-item-action list-group-item-success">This is a success list group item</a>
  8.   <a href="#" class="list-group-item list-group-item-action list-group-item-danger">This is a danger list group item</a>
  9.   <a href="#" class="list-group-item list-group-item-action list-group-item-warning">This is a warning list group item</a>
  10.   <a href="#" class="list-group-item list-group-item-action list-group-item-info">This is a info list group item</a>
  11.   <a href="#" class="list-group-item list-group-item-action list-group-item-light">This is a light list group item</a>
  12.   <a href="#" class="list-group-item list-group-item-action list-group-item-dark">This is a dark list group item</a>
  13. </div>

传达辅助技术的意义（易用性指南）

通过替代方法包括，例如隐藏在.sr-only该类中的附加文本。 使用颜色添加意义只是提供一个视觉指示，这不会传达给使用辅助技术（如屏幕阅读器）的用户，推荐由颜色表达的内容从文字本身就显而易见，或者通过添加.sr-only class选择器这样的替代方法来隐藏此类附加文本。

引入badge微章

在通用样式定义的帮助下，可向任何列表项目添加.badge标签以显示未读计数、活动状态等。

列表组(List-group) - 图14

  1. <ul class="list-group">
  2.   <li class="list-group-item d-flex justify-content-between align-items-center">
  3.     Cras justo odio
  4.     <span class="badge badge-primary badge-pill">14</span>
  5.   </li>
  6.   <li class="list-group-item d-flex justify-content-between align-items-center">
  7.     Dapibus ac facilisis in
  8.     <span class="badge badge-primary badge-pill">2</span>
  9.   </li>
  10.   <li class="list-group-item d-flex justify-content-between align-items-center">
  11.     Morbi leo risus
  12.     <span class="badge badge-primary badge-pill">1</span>
  13.   </li>
  14. </ul>

自定义内容

在flexbox 通用样式定义的支持下，列表组中几乎可以添加任意的HTML内容，包括标签、内容、链接。

列表组(List-group) - 图15

  1. <div class="list-group">
  2.   <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
  3.     <div class="d-flex w-100 justify-content-between">
  4.       <h5 class="mb-1">List group item heading</h5>
  5.       <small>3 days ago</small>
  6.     </div>
  7.     <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
  8.     <small>Donec id elit non mi porta.</small>
  9.   </a>
  10.   <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
  11.     <div class="d-flex w-100 justify-content-between">
  12.       <h5 class="mb-1">List group item heading</h5>
  13.       <small class="text-muted">3 days ago</small>
  14.     </div>
  15.     <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
  16.     <small class="text-muted">Donec id elit non mi porta.</small>
  17.   </a>
  18.   <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
  19.     <div class="d-flex w-100 justify-content-between">
  20.       <h5 class="mb-1">List group item heading</h5>
  21.       <small class="text-muted">3 days ago</small>
  22.     </div>
  23.     <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
  24.     <small class="text-muted">Donec id elit non mi porta.</small>
  25.   </a>
  26. </div>

JavaScript 行为

使用列表组的JavaScript 插件,单独或编译bootstrap.js文件来扩展我们的列表组，以提供可选择的内容列表，如下例：

列表组(List-group) - 图16

  1. <div class="row">
  2.   <div class="col-4">
  3.     <div class="list-group" id="list-tab" role="tablist">
  4.       <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>
  5.       <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>
  6.       <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>
  7.       <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>
  8.     </div>
  9.   </div>
  10.   <div class="col-8">
  11.     <div class="tab-content" id="nav-tabContent">
  12.       <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
  13.       <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
  14.       <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
  15.       <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
  16.     </div>
  17.   </div>
  18. </div>

使用数据属性

.list-group-item 上使用数据属性，可以指定 data-toggle="list" 或在元素上编写任意的JavaScript事件来激活列表组导航，而需要编写任何的JavaScript脚本。

  1. <!-- List group -->
  2. <div class="list-group" id="myList" role="tablist">
  3.   <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  4.   <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  5.   <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  6.   <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
  7. </div>
  9. <!-- Tab panes -->
  10. <div class="tab-content">
  11.   <div class="tab-pane active" id="home" role="tabpanel">...</div>
  12.   <div class="tab-pane" id="profile" role="tabpanel">...</div>
  13.   <div class="tab-pane" id="messages" role="tabpanel">...</div>
  14.   <div class="tab-pane" id="settings" role="tabpanel">...</div>
  15. </div>

通过JavaScript

通过JavaScript启用可选列表项（每个列表项需要单独激活）：

  1. $('#myList a').on('click', function (e) {
  2.   e.preventDefault()
  3.   $(this).tab('show')
  4. })

您可以通过以下几种方式激活单个列表项：

  1. $('#myList a[href="#profile"]').tab('show') // Select tab by name
  2. $('#myList a:first-child').tab('show') // Select first tab
  3. $('#myList a:last-child').tab('show') // Select last tab
  4. $('#myList a:nth-child(3)').tab('show') // Select third tab

fade淡入淡出效果

要使定位的元素有淡入淡出效果，请将.fade 添加到每个 .tab-pane子项中，且第一个列表项目定义 .show 样式使之初始可见。

  1. <div class="tab-content">
  2.   <div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
  3.   <div class="tab-pane fade" id="profile" role="tabpanel">...</div>
  4.   <div class="tab-pane fade" id="messages" role="tabpanel">...</div>
  5.   <div class="tab-pane fade" id="settings" role="tabpanel">...</div>
  6. </div>

方法

$().tab

激活列表项元素和内容容器。标签应该具有data-target 或href定位在DOM中的容器节点。

  1. <div class="list-group" id="myList" role="tablist">
  2.   <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  3.   <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  4.   <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  5.   <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
  6. </div>
  8. <div class="tab-content">
  9.   <div class="tab-pane active" id="home" role="tabpanel">...</div>
  10.   <div class="tab-pane" id="profile" role="tabpanel">...</div>
  11.   <div class="tab-pane" id="messages" role="tabpanel">...</div>
  12.   <div class="tab-pane" id="settings" role="tabpanel">...</div>
  13. </div>
  15. <script>
  16.   $(function () {
  17.     $('#myList a:last').tab('show')
  18.   })
  19. </script>

.tab(‘show’)

选择给定的列表项并显示其关联的网页，之前选择的其它列表项目将被取消选 中，并使其关联的表单空格隐藏，在选项卡实际显示前（如shown.bs.tab事件发生前）返回给调用者。

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

Events事件

當当显示新标签时，事件按以下顺序触发：

  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 分别定位上一个活动选项卡和新的活动选项卡。
  1. $('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  2.   e.target // newly activated tab
  3.   e.relatedTarget // previous active tab
  4. })