Bootstrap/docs/4.5/components/list-group

在GitHub上查看

清单群组

列表组是显示一系列内容的灵活而强大的组件。 修改并扩展它们以支持其中的几乎所有内容。

基本例子

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

• Cras justo odio
• 文字填充
• 莫比·里奥·里苏斯
• 交流门
• 文字填充

<ul class="list-group">
<li class="list-group-item"> Cras justo odio </li>
<li class="list-group-item"> 文字填充</li>
<li class="list-group-item"> 莫比·里奥·里苏斯 </li>
<li class="list-group-item"> 交流门 </li>
<li class="list-group-item"> 文字填充</li>
</ul>

活动项目

Add .active to a .list-group-item 指示当前的活动选择。

• Cras justo odio
• 文字填充
• 莫比·里奥·里苏斯
• 交流门
• 文字填充

<ul class="list-group">
<li class="list-group-item active"> Cras justo odio </li>
<li class="list-group-item"> 文字填充</li>
<li class="list-group-item"> 莫比·里奥·里苏斯 </li>
<li class="list-group-item"> 交流门 </li>
<li class="list-group-item"> 文字填充</li>
</ul>

残疾人用品

Add .disabled to a .list-group-item 做到这一点 出现 禁用。 请注意,某些元素带有 .disabled 还需要自定义JavaScript才能完全禁用其点击事件（例如,链接）。

• Cras justo odio
• 文字填充
• 莫比·里奥·里苏斯
• 交流门
• 文字填充

<ul class="list-group">
<li aria-disabled="true" class="list-group-item disabled"> Cras justo odio </li>
<li class="list-group-item"> 文字填充</li>
<li class="list-group-item"> 莫比·里奥·里苏斯 </li>
<li class="list-group-item"> 交流门 </li>
<li class="list-group-item"> 文字填充</li>
</ul>

链接和按钮

Use <a> s or <button> 创建 可行的 通过添加列出具有悬停,禁用和活动状态的组项目 .list-group-item-action 。我们将这些伪类分开,以确保列表组由非交互式元素（例如 <li> s or <div> s）不提供点击或点击功能。

务必 不使用标准 .btn 这里的课程 .

Cras justo odio 文字填充 莫比·里奥·里苏斯 交流门 文字填充

<div class="list-group">
<a class="list-group-item list-group-item-action active" href="#"> Cras justo odio </a>
<a class="list-group-item list-group-item-action" href="#"> 文字填充</a>
<a class="list-group-item list-group-item-action" href="#"> 莫比·里奥·里苏斯 </a>
<a class="list-group-item list-group-item-action" href="#"> 交流门 </a>
<a aria-disabled="true" class="list-group-item list-group-item-action disabled" href="#" tabindex="-1"> 文字填充</a>
</div>

With <button> s,您也可以利用 disabled 属性而不是 .disabled 类。 可悲的是, <a> s不支持disabled属性。

Cras justo odio 文字填充 莫比·里奥·里苏斯 交流门 文字填充

<div class="list-group">
<button class="list-group-item list-group-item-action active" type="button"> Cras justo odio </button>
<button class="list-group-item list-group-item-action" type="button"> 文字填充</button>
<button class="list-group-item list-group-item-action" type="button"> 莫比·里奥·里苏斯 </button>
<button class="list-group-item list-group-item-action" type="button"> 交流门 </button>
<button class="list-group-item list-group-item-action" disabled="" type="button"> 文字填充</button>
</div>

冲洗

Add .list-group-flush 删除一些边框和圆角以在父容器（例如卡片）中以边缘到边缘的方式呈现列表组项。

• Cras justo odio
• 文字填充
• 莫比·里奥·里苏斯
• 交流门
• 文字填充

<ul class="list-group list-group-flush">
<li class="list-group-item"> Cras justo odio </li>
<li class="list-group-item"> 文字填充</li>
<li class="list-group-item"> 莫比·里奥·里苏斯 </li>
<li class="list-group-item"> 交流门 </li>
<li class="list-group-item"> 文字填充</li>
</ul>

横

Add .list-group-horizontal 将所有断点的列表组项目的布局从垂直更改为水平。 或者,选择一个自适应变体 .list-group-horizontal-{sm|md|lg|xl} 使列表组从该断点开始水平 min-width 。目前 水平列表组不能与刷新列表组结合使用。

专家提示： 想要水平时等宽的列表组项目吗？ Add .flex-fill 到每个列表组项。

• Cras justo odio
• 文字填充
• 莫比·里奥·里苏斯

<ul class="list-group list-group-horizontal">
<li class="list-group-item"> Cras justo odio </li>
<li class="list-group-item"> 文字填充</li>
<li class="list-group-item"> 莫比·里奥·里苏斯 </li>
</ul>

• Cras justo odio
• 文字填充
• 莫比·里奥·里苏斯

<ul class="list-group list-group-horizontal-sm">
<li class="list-group-item"> Cras justo odio </li>
<li class="list-group-item"> 文字填充</li>
<li class="list-group-item"> 莫比·里奥·里苏斯 </li>
</ul>

• Cras justo odio
• 文字填充
• 莫比·里奥·里苏斯

<ul class="list-group list-group-horizontal-md">
<li class="list-group-item"> Cras justo odio </li>
<li class="list-group-item"> 文字填充</li>
<li class="list-group-item"> 莫比·里奥·里苏斯 </li>
</ul>

• Cras justo odio
• 文字填充
• 莫比·里奥·里苏斯

<ul class="list-group list-group-horizontal-lg">
<li class="list-group-item"> Cras justo odio </li>
<li class="list-group-item"> 文字填充</li>
<li class="list-group-item"> 莫比·里奥·里苏斯 </li>
</ul>

• Cras justo odio
• 文字填充
• 莫比·里奥·里苏斯

<ul class="list-group list-group-horizontal-xl">
<li class="list-group-item"> Cras justo odio </li>
<li class="list-group-item"> 文字填充</li>
<li class="list-group-item"> 莫比·里奥·里苏斯 </li>
</ul>

上下文类

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

• 文字填充
• 一个简单的主列表组项
• 一个简单的二级列表组项目
• 一个简单的成功列表组项目
• 一个简单的危险清单组项目
• 一个简单的警告列表组项目
• 一个简单的信息列表组项目
• 一个简单的清单组项目
• 一个简单的黑名单组项目

<ul class="list-group">
<li class="list-group-item"> 文字填充</li>
<li class="list-group-item list-group-item-primary"> 一个简单的主列表组项 </li>
<li class="list-group-item list-group-item-secondary"> 一个简单的二级列表组项目 </li>
<li class="list-group-item list-group-item-success"> 一个简单的成功列表组项目 </li>
<li class="list-group-item list-group-item-danger"> 一个简单的危险清单组项目 </li>
<li class="list-group-item list-group-item-warning"> 一个简单的警告列表组项目 </li>
<li class="list-group-item list-group-item-info"> 一个简单的信息列表组项目 </li>
<li class="list-group-item list-group-item-light"> 一个简单的清单组项目 </li>
<li class="list-group-item list-group-item-dark"> 一个简单的黑名单组项目 </li>
</ul>

上下文类也适用于 .list-group-item-action 。请注意,此处的悬停样式没有在前面的示例中提供。 还支持 .active 州;应用它以指示上下文列表组项上的活动选择。

文字填充 一个简单的主列表组项 一个简单的二级列表组项目 一个简单的成功列表组项目 一个简单的危险清单组项目 一个简单的警告列表组项目 一个简单的信息列表组项目 一个简单的清单组项目 一个简单的黑名单组项目

<div class="list-group">
<a class="list-group-item list-group-item-action" href="#"> 文字填充</a>
<a class="list-group-item list-group-item-action list-group-item-primary" href="#"> 一个简单的主列表组项 </a>
<a class="list-group-item list-group-item-action list-group-item-secondary" href="#"> 一个简单的二级列表组项目 </a>
<a class="list-group-item list-group-item-action list-group-item-success" href="#"> 一个简单的成功列表组项目 </a>
<a class="list-group-item list-group-item-action list-group-item-danger" href="#"> 一个简单的危险清单组项目 </a>
<a class="list-group-item list-group-item-action list-group-item-warning" href="#"> 一个简单的警告列表组项目 </a>
<a class="list-group-item list-group-item-action list-group-item-info" href="#"> 一个简单的信息列表组项目 </a>
<a class="list-group-item list-group-item-action list-group-item-light" href="#"> 一个简单的清单组项目 </a>
<a class="list-group-item list-group-item-action list-group-item-dark" href="#"> 一个简单的黑名单组项目 </a>
</div>

向辅助技术传达意义

使用颜色添加含义仅提供视觉指示,而不会传达给辅助技术的用户（例如屏幕阅读器）。 确保用颜色表示的信息从内容本身来看是显而易见的（例如 可见的文字）,或通过其他方式（例如, .sr-only 类。

带徽章

将徽章添加到任何列表组项目中,以在一些帮助下显示未读计数,活动等 公用事业 .

• Cras justo odio 14
• 文字填充2
• 莫比·里奥·里苏斯 1

<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"> 文字填充<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center"> 莫比·里奥·里苏斯 <span class="badge badge-primary badge-pill">1</span>
</li>
</ul>

自订内容

借助以下功能,甚至可以为以下列表中的链接列表组添加几乎所有HTML： flexbox实用程序 .

列表组项目标题

3天前

Donec id elit non mi porta gravida在eget metus。 Maecenas sed diam eget risus varius blandit。

Donec id elit non mi porta。

列表组项目标题

3天前

Donec id elit non mi porta gravida在eget metus。 Maecenas sed diam eget risus varius blandit。

Donec id elit non mi porta。

列表组项目标题

3天前

Donec id elit non mi porta gravida在eget metus。 Maecenas sed diam eget risus varius blandit。

Donec id elit non mi porta。

<div class="list-group">
<a class="list-group-item list-group-item-action active" href="#">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1"> 列表组项目标题 </h5>
<small> 3天前 </small>
</div>
<p class="mb-1"> Donec id elit non mi porta gravida在eget metus。  Maecenas sed diam eget risus varius blandit。 </p>
<small> Donec id elit non mi porta。 </small>
</a>
<a class="list-group-item list-group-item-action" href="#">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1"> 列表组项目标题 </h5>
<small class="text-muted"> 3天前 </small>
</div>
<p class="mb-1"> Donec id elit non mi porta gravida在eget metus。  Maecenas sed diam eget risus varius blandit。 </p>
<small class="text-muted"> Donec id elit non mi porta。 </small>
</a>
<a class="list-group-item list-group-item-action" href="#">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1"> 列表组项目标题 </h5>
<small class="text-muted"> 3天前 </small>
</div>
<p class="mb-1"> Donec id elit non mi porta gravida在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 文件-扩展我们的列表组以创建本地内容的可选项窗格。

Home 轮廓 消息 设置

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisiitation fugiat tempor。 Voluptate deserunt坐在sunsi nisi aliqua fugiat发生事故。 莫洛特（Mollit）擅自作假,但非临时性（私立）临时奉献自私活动。 Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor。 动画广告中的Lorem aliqua动画。

Cupidatat quis ad sintexcepteur Laborum in esse qui。 劳动保护法除外 莫里特（Mollit）和其他官员（当然）事先同意。 拟人化奇异动产是在动物性偶发性异动性上进行的。 Dolor nisi culpa意外发生在elit eu dolore。 禁止以非广告形式宣传劳动,以广告形式发布广告。

最好不要使用aliquip aliqua aliquip进行锻炼,也不要使comsumo reprehenderit或ipsum变质。 Irure Lorem et al的工作证明了Animate的最终效果。 保守的最小利益保守的利益不鼓励劳动不鼓励劳动。 洛佩姆（Issum id Lorem）坐着,开始了自己的同盟,并尽了最大的责任。 秘密和勤勉的追随者。

Irure enim occaecat labreit qui aliquip reprehenderit amet velit。 Deserunt ullamco前精英utof dol dol nisi officia magna坐在occaecat labouris sunt dolor 最低要求,要求最低工资要求,直到最低要求。 急性molter dolor ut exercise非商品化的商品 Quis ullamco nisi amet qui aute irure eu。 麦格纳劳动者多萝拉·伊斯莫德·乌拉尔·库尔帕因非理性而被淘汰。

<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a aria-controls="list-home" class="list-group-item list-group-item-action active" data-toggle="tab" href="#list-home" id="list-home-list" role="tab"> Home </a>
<a aria-controls="list-profile" class="list-group-item list-group-item-action" data-toggle="tab" href="#list-profile" id="list-profile-list" role="tab"> 轮廓 </a>
<a aria-controls="list-messages" class="list-group-item list-group-item-action" data-toggle="tab" href="#list-messages" id="list-messages-list" role="tab"> 消息 </a>
<a aria-controls="list-settings" class="list-group-item list-group-item-action" data-toggle="tab" href="#list-settings" id="list-settings-list" role="tab"> 设置 </a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div aria-labelledby="list-home-list" class="tab-pane fade show active" id="list-home" role="tabpanel">
<p> Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisiitation fugiat tempor。  Voluptate deserunt坐在sunsi nisi aliqua fugiat发生事故。  莫洛特（Mollit）擅自作假,但非临时性（私立）临时奉献自私活动。  Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor。  动画广告中的Lorem aliqua动画。 </p>
</div>
<div aria-labelledby="list-profile-list" class="tab-pane fade" id="list-profile" role="tabpanel">
<p> Cupidatat quis ad sintexcepteur Laborum in esse qui。  劳动保护法除外  莫里特（Mollit）和其他官员（当然）事先同意。  拟人化奇异动产是在动物性偶发性异动性上进行的。  Dolor nisi culpa意外发生在elit eu dolore。  禁止以非广告形式宣传劳动,以广告形式发布广告。 </p>
</div>
<div aria-labelledby="list-messages-list" class="tab-pane fade" id="list-messages" role="tabpanel">
<p> 最好不要使用aliquip aliqua aliquip进行锻炼,也不要使comsumo reprehenderit或ipsum变质。  Irure Lorem et al的工作证明了Animate的最终效果。  保守的最小利益保守的利益不鼓励劳动不鼓励劳动。  洛佩姆（Issum id Lorem）坐着,开始了自己的同盟,并尽了最大的责任。  秘密和勤勉的追随者。 </p>
</div>
<div aria-labelledby="list-settings-list" class="tab-pane fade" id="list-settings" role="tabpanel">
<p> Irure enim occaecat labreit qui aliquip reprehenderit amet velit。  Deserunt ullamco前精英utof dol dol nisi officia magna坐在occaecat labouris sunt dolor  最低要求,要求最低工资要求,直到最低要求。  急性molter dolor ut exercise非商品化的商品  Quis ullamco nisi amet qui aute irure eu。  麦格纳劳动者多萝拉·伊斯莫德·乌拉尔·库尔帕因非理性而被淘汰。 </p>
</div>
</div>
</div>
</div>

使用数据属性

您只需指定即可激活列表组导航而无需编写任何JavaScript data-toggle="list" 或元素上。 在以下位置使用这些数据属性 .list-group-item.

通过JavaScript

通过JavaScript启用可选项列表项（每个列表项需要单独激活）：

您可以通过以下几种方式激活单个列表项：

淡入淡出效果

要使标签面板淡入,请添加 .fade 每个 .tab-pane 。第一个标签窗格还必须具有 .show 使初始内容可见。

方法

$（）。tab

激活列表项元素和内容容器。 标签应该有一个 data-target 或者 href 在DOM中定位容器节点。

.tab（“显示”）

选择给定的列表项并显示其关联的窗格。 先前选择的任何其他列表项将变为未选中状态,并且其关联的窗格被隐藏。 在实际显示选项卡窗格之前返回到调用者 （例如,在 shown.bs.tab 事件发生）。

活动

显示新标签时,事件将按以下顺序触发：

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 and hidden.bs.tab 事件不会被触发。

事件类型	描述
show.bs.tab	此事件会在标签页显示时触发,但会在新标签页显示之前触发。 Use event.target and event.relatedTarget 分别定位到活动标签和上一个活动标签（如果有）。
shown.bs.tab	显示标签后,此事件会在标签显示上触发。 Use event.target and event.relatedTarget 分别定位到活动标签和上一个活动标签（如果有）。
hide.bs.tab	当要显示新选项卡时（因此将隐藏先前的活动选项卡）,将触发此事件。 Use event.target and event.relatedTarget 以分别定位当前的活动标签和新的即将投放的标签。
hidden.bs.tab	此事件在显示新标签后触发（因此,先前的活动标签被隐藏）。 Use event.target and event.relatedTarget 分别定位到先前的活动标签和新的活动标签。