Bootstrap 5 列表组
基本列表组
最基本的列表组是一个无序列表，包含列表项
- 第一项
- 第二项
- 第三项
要创建一个基本的列表组，请使用一个带有类 .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-numbered 类来创建在前面带有数字的列表项
- 第一项
- 第二项
- 第三项
示例
<ol class="list-group list-group-numbered">
<li class="list-group-item">第一项</li>
<li class="list-group-item">第二项</li>
<li class="list-group-item">第三项</li>
</ol>
动手试试 »
水平列表组
如果您想要列表项水平显示而不是垂直显示（并排而不是叠放），请将 .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 bg-primary rounded-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
广告
<span class="badge bg-primary rounded-pill">50</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
垃圾邮件
<span class="badge bg-primary rounded-pill">99</span>
</li>
</ul>
动手试试 »
