列表组
1）基础列表
包括两个部分：ul中list－group以及li中list－group－item
例如：
<ul class="list-group">
<li class="list-group-item">揭开CSS3的面纱</li>
<li class="list-group-item">CSS3选择器</li>
<li class="list-group-item">CSS3边框</li>
<li class="list-group-item">CSS3背景</li>
<li class="list-group-item">CSS3文本</li>
</ul>
效果：
2)带徽章的列表组
在类名为“list－group－item”的标签中加上类名为“badge”的span标签
例如：
<ul class="list-group">
<li class="list-group-item">
<span class="badge">13</span>揭开CSS3的面
</li>
<li class="list-group-item">
<span class="badge">456</span>CSS3选择器
</li>
<li class="list-group-item">
<span class="badge">892</span>CSS3边框
</li>
<li class="list-group-item">
<span class="badge">90</span>CSS3背景
</li>
<li class="list-group-item">
<span class="badge">1290</span>CSS3文本
</li>
</ul>
效果：
原理 ： 给徽章设定了右漂浮
3)带链接的列表组
在类名为“list－group－item” 的li标签中添加a标签
<ul class="list-group">
<li class="list-group-item">
<a href="##">揭开CSS3的面</a>
</li>
<li class="list-group-item">
<a href="##">CSS3选择器</a>
</li>
...
</ul>
不足：链接只在文本点击区域有效
解决方法：
使用div替代ul
使用a标签替代li
如：
<div class="list-group">
<a href="##" class="list-group-item">图解CSS3</a>
<a href="##" class="list-group-item"><span class="badge">220</span>Sass教程</a>
<a href="##" class="list-group-item">玩转Bootstrap</a>
</div>
在类名为list－group－item的a标签做了一些处理，例如去除文本下划线，增加悬浮效果
好处：不仅仅只有文本部分有效，在非文本的整个区域都有效果
4）自定义列表组
添加两个新样式：
均属于list－group－item下
list－group－item－heading：定义头部样式［使用h4标签］
list－group－item－text：定义列表主要内容［使用p标签］
尽量把span放到标题的后面就会紧跟着标题
5）列表项的状态设置
active：当前状态
disabled：禁用状态
直接添加到list－group－item后面
将span放到a标签中会自动放到悬浮到右边
6)多彩列表组
提供不同颜色的文本以及背景
list-group-item-success：成功，背景色绿色
list-group-item-info：信息，背景色蓝色
list-group-item-warning：警告，背景色为黄色
list-group-item-danger：错误，背景色为红色
直接加在list－group－item的后面
