List group（列表组） - [ Bootstrap 4 中文开发手册 ] - 在线原生手册

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

directory search

Getting started Accessibility（无障碍） Browsers and devices（浏览器和设备） Build tools（构建工具） Contents（内容） Download（下载） JavaScript Theming Bootstrap（主题Bootstrap） Webpack Components: Alerts Alerts（警报） Components: Badges Badges（徽章） Components: Breadcrumb Breadcrumb Components: Button group Button group（按钮组） Components: Buttons Buttons（按钮） Components: Cards Components: Carousel Cards（卡） Carousel（圆盘传送带） Components: Collapse Collapse（折叠） Components: Dropdowns Dropdowns（下拉菜单） Components: Forms Forms（表单） Components: Input group Input group（输入群组） Components: Input group Jumbotron（广告大屏幕） Components: List group List group（列表组） Components: Modal Modal（互动视窗） Components: Navbar Navbar（导航栏） Components: Navs Navs（导航栏） Components: Pagination Pagination（分页） Components: Popovers Popovers（弹出框） Components: Progress Progress（进度条） Components: Scrollspy Scrollspy（滚动监听） Components: Tooltips Tooltips（提示工具） Content Code（代码） Figures（图片区） Images（图片） Reboot（重置） Tables（表格） Typography（排版） Layout Grid（网格） Layout（布局） Media object（多媒体对象） Utilities for layout（排版通用类别） Migration Migrating to v4（迁移到v4） Utilities Borders（边框） Clearfix（清除浮动） Close icon（关闭图标） Colors（颜色） Display property（显示属性） Embeds（内嵌） Flex（弹性） Float（浮动） Image replacement（图像替换） Position（位置） Screenreaders（荧幕阅读器） Sizing（尺寸） Spacing（间隔） Text（文本） Vertical alignment（垂直对齐） Visibility（能见度）

characters

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

基本示例

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

<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以指示当前的活动选择。

<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 来完全禁用其点击事件（例如，链接）。

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

<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 属性。

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

上下文类

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

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

带有徽章

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

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

使用数据属性

您可以通过简单地指定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})

Previous article： Next article：