Bootstrap 4参考手册

组件·列表组 | List group

列表组 | List group

列表组是用于显示一系列内容的灵活且强大的组件。修改并扩展它们以支持其中的任何内容。

基本示例

最基本的列表组是包含列表项和适当类的无序列表。使用后面的选项构建它，或根据需要使用您自己的 CSS。

在 getbootstrap.com 上打开示例

<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到一个.list-group-item以指示当前的活动选择。

在 getbootstrap.com 上打开示例

<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到一个.list-group-item使其显示禁用。请注意，一些带有.disabled元素.disabled还需要自定义 JavaScript 来完全禁用其点击事件（例如，链接）。

在 getbootstrap.com 上打开示例

<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>或<button> 通过添加.list-group-item-action来创建具有悬停，禁用和活动状态的可操作列表组项目。我们将这些伪类分开，以确保由非交互式元素（如<li>或<div>）组成的列表组不提供点击或点击功能。

一定不要在 这里使用标准.btn类。

在 getbootstrap.com 上打开示例

<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>，您也可以使用disabled属性而不是.disabled类。可悲的是，<a>不支持 disabled 属性。

在 getbootstrap.com 上打开示例

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

上下文类

使用上下文类来设置具有状态背景和颜色的列表项。

在 getbootstrap.com 上打开示例

<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状态；将其应用于指示上下文列表组项目上的活动选择。

在 getbootstrap.com 上打开示例

<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类中的其他文本。

带有徽章

在一些实用程序的帮助下，将徽章添加到任何列表组项目以显示未读的计数，活动等等。

在 getbootstrap.com 上打开示例

<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，甚至包括下面的链接列表组。

在 getbootstrap.com 上打开示例

<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文件 - 扩展我们的列表组以创建本地内容的可放置窗格。

在 getbootstrap.com 上打开示例

<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使用这些数据属性。

<!-- 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').tab('show') // Select first tab
$('#myList a:last').tab('show') // Select last tab
$('#myList li:eq(2) a').tab('show') // Select third tab (0-indexed)

淡入淡出效果

为了使制表符面板淡入，添加.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').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 (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

组件·列表组 | List group相关

Bootstrap 4

Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。

主页	https://getbootstrap.com/
源码	https://github.com/twbs/bootstrap
版本	4
发布版本	4.0.0-beta.2

Bootstrap 4目录

1.快速开始 \| Getting started
2.组件·信息提示框 \| Alerts
3.组件·徽章 \| Badges
4.组件·面包屑导航 \| Breadcrumb
5.组件·按钮组 \| Button group
6.组件·按钮 \| Buttons
7.组件·卡片 \| Cards
8.组件·轮播 \| Carousel
9.组件·折叠 \| Collapse
10.组件·下拉菜单 \| Dropdowns
11.组件·表单 \| Forms
12.组件·输入框组 \| Input group
13.组件·大屏幕 \| Jumbotron
14.组件·列表组 \| List group
15.组件·模态框 \| Modal
16.组件·导航栏 \| Navbar
17.组件·导航 \| Navs
18.组件·分页 \| Pagination
19.组件·弹出框 \| Popovers
20.组件·进度条 \| Progress
21.组件·滚动监听 \| Scrollspy
22.组件·提示工具 \| Tooltips
23.内容 \| Content
24.布局 \| Layout
25.迁移 \| Migration
26.实用工具 \| Utilities
27.Bootstrap4 网格系统
28.Bootstrap4 按钮组
29.Bootstrap4 按钮
30.Bootstrap4 图像形状
31.Bootstrap4 表格
32.Bootstrap4 颜色
33.Bootstrap4 文字排版
34.Bootstrap4 轮播
35.Bootstrap4 表单控件
36.Bootstrap4 表单
37.Bootstrap4 导航栏
38.Bootstrap4 导航
39.Bootstrap4 折叠
40.Bootstrap4 下拉菜单
41.Bootstrap4 卡片
42.Bootstrap4 分页
43.Bootstrap4 小工具
44.Bootstrap4 滚动监听
45.Bootstrap4 弹出框
46.Bootstrap4 提示框
47.Bootstrap4 模态框
48.Bootstrap 4 多媒体对象
49.Bootstrap 4 Flex（弹性）布局
50.Bootstrap4 创建一个网页
51.Bootstrap4 自定义表单
52.Bootstrap4 面包屑导航（Breadcrumb）