本文将介绍列表组。列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下：
向元素ul 添加class list-group
向li添加class list-group-item
下面的示例演示了这点：
HTML
<ul class="list-group">
<li class="list-group-item">免费注册域名</li>
<li class="list-group-item">免费windows空间托管</li>
<li class="list-group-item">托管的数量</li>
<li class="list-group-item">24*7 支持</li>
<li class="list-group-item">每年更新成本</li>
</ul>
向列表组中添加徽章
我们可以向任意的列表项添加徽章组件，它会自动定位到右边。只需要在li元素中添加 span class=badge即可。下面的示例演示了这一点：
HTML
<h2>添加徽章</h2>
<ul class="list-group">
<li class="list-group-item">免费注册域名</li>
<li class="list-group-item">免费windows空间托管</li>
<li class="list-group-item">托管的数量</li>
<li class="list-group-item">24*7 支持</li>
<li class="list-group-item">每年更新成本</li>
<li class="list-group-item">
<span class="badge">新</span>
24*7 支持
</li>
<li class="list-group-item">每年更新成本</li>
<li class="list-group-item">
<span class="badge">新</span>
折扣优惠
</li>
</ul>
向列表组添加链接
通过用锚标签代替列表项，我们可以向列表组添加链接。我们需要使用div代替ul元素。下面的示例和效果演示了这一点：
先看效果：
HTML
<h4>列表组中的链接</h4>
<div>
<a href="#" class="list-group-item">免费域名注册</a>
<a href="#" class="list-group-item">24*7支持</a>
<a href="#" class="list-group-item">免费window空间托管</a>
<a href="#" class="list-group-item">图像的数量</a>
<a href="#" class="list-group-item">每年更新成本</a>
</div>
向列表组添加自定义内容
我们可以向上面添加链接的列表任意的html内容。下面的示例演示了这点：
效果：
html
<h4>列表组中的自定义内容</h4>
<ul class="list-group">
<li class="list-group-item active">
<h4 class="list-group-item-heading">入门网站包</h4>
<p>你将通过网页进行免费域名注册</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">24*7 支持</h4>
<p>我们提供24*7 支持</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">商务网站包
</h4>
</li>
<li class="list-group-item">托管的数量</li>
</ul>
本节完。