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

禁用项

向 .list-group-item 添加 .disabled 可使其看起来已禁用。请注意，某些带有 .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
})