基本列表组
最基本的列表组是一个无序列表列表项：
- 第一项
- 第二项
- 第三项
要创建一个基本的清单组，使用<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> 试一试» 清单组徽章
您也可以徽章添加到列表组。 徽章将自动位于右侧：
- 12新
- 5删除
- 3警告
要创建一个徽章，创建一个<span>与类元素.badge列表项内：
例
<ul class="list-group">
<li
class="list-group-item"><span class="badge">12</span> New</li>
<li
class="list-group-item"><span class="badge">5</span> Deleted</li>
<li class="list-group-item"><span class="badge">3</span> Warnings</li>
</ul> 试一试» 列出组链接项目
列表中的组中的项目也可以是超链接。 这将添加一个灰色的背景色上悬停：
要创建一个列表组链接项目，使用<div>而不是<ul>和<a>代替<li>
例
<div class="list-group">
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second
item</a>
<a href="#" class="list-group-item">Third item</a>
</div> 试一试» 活动状态
使用.active类突显当前项目：
例
<div class="list-group">
<a href="#" class="list-group-item
active">First item</a>
<a href="#" class="list-group-item">Second
item</a>
<a href="#" class="list-group-item">Third item</a>
</div> 试一试» 残疾人项目
下面的列表组有一个禁用的项目：
要禁用某个项目，添加.disabled类：
例
<div class="list-group">
<a href="#" class="list-group-item
disabled">First item</a>
<a href="#" class="list-group-item">Second
item</a>
<a href="#" class="list-group-item">Third item</a>
</div> 试一试» 上下文类
上下文类可用于彩色列表项：
- 第一项
- 第二项
- 第三项
- 第四个项目
着色列表项的类是： .list-group-item-success ， list-group-item-info ， list-group-item-warning ，并.list-group-item-danger ：
例
<ul class="list-group">
<li class="list-group-item
list-group-item-success">First item</li>
<li
class="list-group-item list-group-item-info">Second item</li>
<li
class="list-group-item list-group-item-warning">Third item</li>
<li class="list-group-item list-group-item-danger">Fourth item</li>
</ul> 试一试» 自定义内容
您可以将列表组项目内增加近任何HTML。
Bootstrap提供了类.list-group-item-heading和.list-group-item-text可以按如下方式使用：
例
<div class="list-group">
<a href="#" class="list-group-item
active">
<h4 class="list-group-item-heading">First
List Group Item Heading</h4>
<p
class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4
class="list-group-item-heading">Second List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4
class="list-group-item-heading">Third List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
</div> 试一试»