Bootstrap 4 列表组
基本列表组
最基本的列表组是一个带有列表项的无序列表
- 第一项
- 第二项
- 第三项
要创建一个基本的列表组，请使用带有 .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>
亲自尝试 »
活动状态
- 活动项
- 第二项
- 第三项
使用 .active 类来突出显示当前项
示例
<ul class="list-group">
<li class="list-group-item active">活动项</li>
<li class="list-group-item">第二项</li>
<li class="list-group-item">第三项</li>
</ul>
亲自尝试 »
带有链接项的列表组
要创建一个带有链接项的列表组，请使用 <div> 而不是 <ul>，以及 <a> 而不是 <li>。可选地，如果要悬停时显示灰色背景颜色，则可以添加 .list-group-item-action 类
示例
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">第一项</a>
<a href="#" class="list-group-item list-group-item-action">第二项</a>
<a href="#" class="list-group-item list-group-item-action">第三项</a>
</div>
亲自尝试 »
禁用项
.disabled 类会为禁用的项添加一个浅色的文本颜色。当应用于链接时，它会移除悬停效果
示例
<div class="list-group">
<a href="#" class="list-group-item disabled">禁用项</a>
<a href="#" class="list-group-item disabled">禁用项</a>
<a href="#" class="list-group-item">第三项</a>
</div>
亲自尝试 »
无边框/移除边框
使用 .list-group-flush 类来移除一些边框和圆角
- 第一项
- 第二项
- 第三项
- 第四项
示例
<ul class="list-group list-group-flush">
<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>
亲自尝试 »
水平列表组
如果要使列表项水平显示而不是垂直显示（并排而不是上下排列），请将 .list-group-horizontal 类添加到 .list-group
- 第一项
- 第二项
- 第三项
- 第四项
示例
<ul class="list-group list-group-horizontal">
<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>
亲自尝试 »
上下文类
上下文类可以用来给列表项着色
- 成功项
- 次要项
- 信息项
- 警告项
- 危险项
- 主要项
- 深色项
- 浅色项
给列表项着色的类有： .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, .list-group-item-primary, list-group-item-dark 和 list-group-item-light,
示例
<ul class="list-group">
<li class="list-group-item list-group-item-success">成功项</li>
<li class="list-group-item list-group-item-secondary">次要项</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>
<li class="list-group-item list-group-item-primary">主要项</li>
<li class="list-group-item list-group-item-dark">深色项</li>
<li class="list-group-item list-group-item-light">浅色项</li>
</ul>
亲自尝试 »
带有上下文类的链接项
示例
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">操作项</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">成功项</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">次要项</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">信息项</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">警告项</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">危险项</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">主要项</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">深色项</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">浅色项</a>
</div>
亲自尝试 »
带有徽章的列表组
将 .badge 类与实用程序/辅助类结合使用，可以在列表组中添加徽章
- 收件箱 12
- 广告 50
- 垃圾邮件 99
示例
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
收件箱
<span class="badge badge-primary badge-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
广告
<span class="badge badge-primary badge-pill">50</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
垃圾邮件
<span class="badge badge-primary badge-pill">99</span>
</li>
</ul>
亲自尝试 »
提示：在我们的 BS4 实用工具章节 中了解有关 Bootstrap 4 实用程序/辅助类的更多信息。
