Bootstrap 列表组
基本列表组
最基本的列表组是一个带有列表项的无序列表
- 第一项
- 第二项
- 第三项
要创建基本列表组，请使用带有 .list-group 类的 <ul> 元素，以及带有 .list-group-item 类的 <li> 元素
示例
<ul class="list-group">
<li class="list-group-item">第一项</li>
<li class="list-group-item">第二项</li>
<li class="list-group-item">第三项</li>
</ul>
自己试一试 »
带有徽章的列表组
您也可以在列表组中添加徽章。徽章将自动定位在右侧
- 12 新
- 5 已删除
- 3 警告
要创建徽章，请在列表项内创建一个带有 .badge 类的 <span> 元素
示例
<ul class="list-group">
<li class="list-group-item">新 <span class="badge">12</span></li>
<li class="list-group-item">已删除 <span class="badge">5</span></li>
<li class="list-group-item">警告 <span class="badge">3</span></li>
</ul>
自己试一试 »
带有链接项的列表组
列表组中的项也可以是超链接。这将在悬停时添加一个灰色背景颜色
要创建一个带有链接项的列表组，请使用 <div> 代替 <ul>，使用 <a> 代替 <li>
示例
<div class="list-group">
<a href="#" class="list-group-item">第一项</a>
<a href="#" class="list-group-item">第二项</a>
<a href="#" class="list-group-item">第三项</a>
</div>
自己试一试 »
活动状态
使用 .active 类突出显示当前项
示例
<div class="list-group">
<a href="#" class="list-group-item active">第一项</a>
<a href="#" class="list-group-item">第二项</a>
<a href="#" class="list-group-item">第三项</a>
</div>
自己试一试 »
禁用项
以下列表组有一个禁用的项
要禁用项，请添加 .disabled 类
示例
<div class="list-group">
<a href="#" class="list-group-item disabled">第一项</a>
<a href="#" class="list-group-item">第二项</a>
<a href="#" class="list-group-item">第三项</a>
</div>
自己试一试 »
上下文类
上下文类可用于为列表项着色
- 第一项
- 第二项
- 第三项
- 第四项
用于为列表项着色的类是： .list-group-item-success，list-group-item-info， list-group-item-warning，以及 .list-group-item-danger
示例
<ul class="list-group">
<li class="list-group-item list-group-item-success">第一项</li>
<li class="list-group-item list-group-item-info">第二项</li>
<li class="list-group-item list-group-item-warning">第三项</li>
<li class="list-group-item list-group-item-danger">第四项</li>
</ul>
自己试一试 »
自定义内容
您可以在列表组项中添加几乎任何 HTML。
Bootstrap 提供了 .list-group-item-heading 和 .list-group-item-text 类，可按如下方式使用
示例
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">第一个列表组项标题</h4>
<p class="list-group-item-text">列表组项文本</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">第二个列表组项标题</h4>
<p class="list-group-item-text">列表组项文本</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">第三个列表组项标题</h4>
<p class="list-group-item-text">列表组项文本</p>
</a>
</div>
自己试一试 »
