列表组 | List group
列表组是用于显示一系列内容的灵活且强大的组件。修改并扩展它们以支持其中的任何内容。
基本示例
最基本的列表组是包含列表项和适当类的无序列表。使用后面的选项构建它,或根据需要使用您自己的 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
})
本文档系便宜云服务器开发者社区成员共同维护,如有问题请联系 cloudcommunity@tencent.com