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">Success item</li> <li class="list-group-item list-group-item-secondary">Secondary item</li> <li class="list-group-item list-group-item-info">Info item</li> <li class="list-group-item list-group-item-warning">Warning item</li> <li class="list-group-item list-group-item-danger">Danger item</li> <li class="list-group-item list-group-item-primary">Primary item</li> <li class="list-group-item list-group-item-dark">Dark item</li> <li class="list-group-item list-group-item-light">Light item</li> </ul>
带有上下文类的链接项目
实例
<div class="list-group"> <a href="#" class="list-group-item list-group-item-action">Action item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a> </div>
带徽章的列表组
将 .badge 类与 utility/helper 类结合起来，可在列表组中添加徽章：
实例
<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>
