Getting startedAccessibility（无障碍）Browsers and devices（浏览器和设备）Build tools（构建工具）Contents（内容）Download（下载）JavaScriptTheming Bootstrap（主题Bootstrap）WebpackComponents: AlertsAlerts（警报）Components: BadgesBadges（徽章）Components: BreadcrumbBreadcrumbComponents: Button groupButton group（按钮组）Components: ButtonsButtons（按钮）Components: CardsComponents: CarouselCards（卡）Carousel（圆盘传送带）Components: CollapseCollapse（折叠）Components: DropdownsDropdowns（下拉菜单）Components: FormsForms（表单）Components: Input groupInput group（输入群组）Components: Input groupJumbotron（广告大屏幕）Components: List groupList group（列表组）Components: ModalModal（互动视窗）Components: NavbarNavbar（导航栏）Components: NavsNavs（导航栏）Components: PaginationPagination（分页）Components: PopoversPopovers（弹出框）Components: ProgressProgress（进度条）Components: ScrollspyScrollspy（滚动监听）Components: TooltipsTooltips（提示工具）ContentCode（代码）Figures（图片区）Images（图片）Reboot（重置）Tables（表格）Typography（排版）LayoutGrid（网格）Layout（布局）Media object（多媒体对象）Utilities for layout（排版通用类别）MigrationMigrating to v4（迁移到v4）UtilitiesBorders（边框）Clearfix（清除浮动）Close icon（关闭图标）Colors（颜色）Display property（显示属性）Embeds（内嵌）Flex（弹性）Float（浮动）Image replacement（图像替换）Position（位置）Screenreaders（荧幕阅读器）Sizing（尺寸）Spacing（间隔）Text（文本）Vertical alignment（垂直对齐）Visibility（能见度）
©
本文档使用
php.cn手册 发布
文字
列表组是用于显示一系列内容的灵活且强大的组件。修改并扩展它们以支持其中的任何内容。
基本示例
最基本的列表组是包含列表项和适当类的无序列表。使用后面的选项构建它，或根据需要使用您自己的 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})