1. 概述
列表组用来显示一组关联的显示元素，Bootstrap提供了可以灵活使用的列表组组件list-group，本篇就来具体演示下。
2. 普通列表组
用list-group类修饰ul元素，使用list-group-item类修饰li元素，即可创建列表组，代码如下：
普通列表组： <ul class="list-group"> <li class="list-group-item">第1节</li> <li class="list-group-item">第2节</li> <li class="list-group-item">第3节</li> <li class="list-group-item">第4节</li> </ul>
3. 将普通链接转换为列表组
不仅可以针对ul、li组合应用列表组样式类，还可以对普通的div、a元素使用。
链接转换为列表组：
<div class="list-group">
<a class="list-group-item">第1节</a>
<a class="list-group-item">第2节</a>
<a class="list-group-item">第3节</a>
<a class="list-group-item">第4节</a>
</div>
4. 调整列表项的样式
可以针对列表项应用一些样式，例如active表示选中样式，disabled表示禁用，还有一些常见的其他样式：
调整列表项样式
<ul class="list-group">
<li class="list-group-item active">active</li>
<li class="list-group-item disabled">disabled</li>
<li class="list-group-item list-group-item-info">list-group-item-info</li>
<li class="list-group-item list-group-item-success">list-group-item-success</li>
<li class="list-group-item list-group-item-warning">list-group-item-warning</li>
<li class="list-group-item list-group-item-danger">list-group-item-danger</li>
</ul>
效果如下：
5. 带徽章的列表组
可以在列表项中添加徽章，有趣的是，徽章会自动的排列到列表组的右侧，如下：
带徽章列表组
<ul class="list-group">
<li class="list-group-item">收件箱<span class="badge">5</span></li>
<li class="list-group-item">发件箱<span class="badge">5</span></li>
<li class="list-group-item">草稿箱<span class="badge">5</span></li>
<li class="list-group-item">回收站<span class="badge">5</span></li>
</ul>
效果如下：
6. 添加标题和内容
列表项可以摆脱固定的文字内容，通过list-item-item-heading可以为列表项添加标题部分，然后通过list-group-item-text可以为列表项添加内容部分。
添加标题和内容 <ul class="list-group"> <li class="list-group-item"> <div class="list-group-item-heading h4">张三</div> <div class="list-group-item-text">一个英俊的小伙子</div> </li> <li class="list-group-item"> <div class="list-group-item-heading h4">李四</div> <div class="list-group-item-text">一个优秀的小伙子</div> </li> <li class="list-group-item"> <div class="list-group-item-heading h4">赵五</div> <div class="list-group-item-text">一个有前途的的小伙子</div> </li> </ul>
7. 小结
列表组其实并不算特别常用，但是如果有合适的场景，例如邮箱的导航，直接使用列表组无疑更加省心。
