列表组
列表组是用于显示一系列内容的灵活而强大的组件。修改和扩展它们以支持其中的任何内容。
基本示例
最基本的列表组是一个包含列表项和适当类的无序列表。使用以下选项或根据需要使用您自己的 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
到 a.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>
残障物品
添加.disabled
到 a.list-group-item
以使其显示为禁用。请注意,某些元素.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>
s 或<button>
s 通过添加来创建具有悬停、禁用和活动状态的可操作.list-group-item-action
列表组项。我们将这些伪类分开,以确保由非交互元素(如<li>
s 或<div>
s)组成的列表组不会提供点击或点击功能。
一定不要在这里使用标准.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>
s,您还可以使用disabled
属性而不是.disabled
类。可悲的是,<a>
s 不支持 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,甚至是像下面这样的链表组。
<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>
使用数据属性
您无需编写任何 JavaScript,只需data-toggle="list"
在元素上指定或即可激活列表组导航。在 上使用这些数据属性.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
激活列表项元素和内容容器。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')
活动
显示新选项卡时,事件按以下顺序触发:
hide.bs.tab
(在当前活动选项卡上)show.bs.tab
(在待显示的选项卡上)hidden.bs.tab
(在上一个活动选项卡上,与hide.bs.tab
事件相同)shown.bs.tab
(在刚刚显示的新活动选项卡上,与show.bs.tab
活动相同)
如果没有选项卡处于活动状态,则不会触发hide.bs.tab
and事件。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 (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})