Bootstrap 5 列表组
基础列表组
大部分基础列表组都是无序的:
- 第一项
- 第二项
- 第三项
要创建列表组，可以在 <ul> 元素上添加 .list-group 类, 在
<li> 元素上添加 .list-group-item 类:
实例
<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>
亲自试一试 »
禁用的列表项
.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>
亲自试一试 »
链接列表项
要创建一个链接的列表项，可以将 <ul> 替换为 <div>，<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>
亲自试一试 »
移除列表边框
使用 .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 类与 utility/helper 类结合起来，在列表组中添加徽章:
- Inbox 12
- Ads 50
- Junk 99
实例
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Inbox
<span class="badge bg-primary rounded-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Ads
<span class="badge bg-primary rounded-pill">50</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Junk
<span class="badge bg-primary rounded-pill">99</span>
</li>
</ul>
亲自试一试 »
