Bootstrap4 列出组
基本列表组
最基本的列表组是一个包含列表项的无序列表：
- 第一项
- 第二项
- 第三项
要创建基本列表组，请使用<ul>具有类的元素.list-group， 和<li>具有类的元素.list-group-item:
示例
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
亲自试一试 »
活动状态
- 活动项目
- 第二项
- 第三项
使用.active类来突出显示当前项目：
示例
<ul class="list-group">
<li class="list-group-item active">Active item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third 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">First item</a>
<a href="#" class="list-group-item list-group-item-action">Second item</a>
<a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>
亲自试一试 »
禁用项目
这个.disabled类为禁用的项目添加较浅的文本颜色。当在链接上使用时，它将消除悬停效果：
示例
<div class="list-group">
<a href="#" class="list-group-item disabled">Disabled item</a>
<a href="#" class="list-group-item disabled">Disabled item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
亲自试一试 »
齐平/删除边框
使用.list-group-flush类来删除一些边框和圆角：
- 第一项
- 第二项
- 第三项
- 第四项
示例
<ul class="list-group list-group-flush">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
亲自试一试 »
水平列表组
如果您希望列表项水平显示而不是垂直显示（并排而不是彼此重叠），请添加.list-group-horizontal上课到.list-group:
- 第一项
- 第二项
- 第三项
- 第四项
示例
<ul class="list-group list-group-horizontal">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth 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具有实用程序/帮助程序类的类，用于在列表组内添加徽章：
- 收件箱12
- 广告50
- 垃圾99
示例
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Inbox
<span class="badge badge-primary badge-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Ads
<span class="badge badge-primary badge-pill">50</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Junk
<span class="badge badge-primary badge-pill">99</span>
</li>
</ul>
亲自试一试 »
提示：阅读我们的 Bootstrap 4 Utility/Helper 类的更多信息BS4 公用事业章。