Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容。列表组可以用来制作列表清单、垂直导航等效果，也可以配合其他的组件制作出更漂亮的组件，列表组在bootstrap框架中也是一个独立的组件，所以也对应有自己独立源码：
LESS：list-group.less
SASS:_list-group.scss
列表组看上去就是去掉了列表符号的列表项，并且配上一些特定的样式，在bootstrap框架中的基础列表组主要包括两个部分：
list-group:列表组容器，常用的是ul元素，也可以是ol或div元素
list-group-item:列表项，常用的是li元素，也可以是div元素
对于基础列表组并没有做过多的样式设置，主要设置了其间距、边框和圆角等；
.list-group { padding-left: 0; margin-bottom: 20px; } .list-group-item { position: relative; display: block; padding: 10px 15px; margin-bottom: -1px; background-color: #fff; border: 1px solid #ddd; } .list-group-item:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; } .list-group-item:last-child { margin-bottom: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; }
来看一个例子：
<h1>基础列表组</h1> <ul> <li>腊肉土豆焖饭</li> <li>香辣风味炸鸡块</li> <li>香菜皮蛋豆腐</li> <li>荷兰豆炒马蹄</li> <li>山楂排骨</li> <li>韭菜炒河虾</li> </ul>
带徽章的列表组
带徽章的列表组其实就是将bootstrap框架中的徽章组件和基础列表组件结合在一起的一个效果，具体做法很简单，只需在.list-group-item的基础上追加徽章组件“badge”
实现原理：
给徽章设置了一个右浮动，当然如果两个徽章同时在一个列表项中出现时，还设置了它们之间的距离
.list-group-item > .badge { float: right; } .list-group-item > .badge + .badge { margin-right: 5px; }
例子：
<h1>带徽章的列表组</h1> <ul> <li> <span>13</span> 腊肉土豆焖饭 </li> <li> <span>20</span> 香辣风味炸鸡块 </li> <li> <span>12</span> 香菜皮蛋豆腐 </li> <li> <span>5</span> 荷兰豆炒马蹄 </li> <li> <span>8</span> 山楂排骨 </li> <li> <span>15</span> 韭菜炒河虾 </li> </ul>
带链接的列表组
带连接的列表组其实就是每个列表项都具有链接效果，一般让人想到的就是在基础列表组的基础上，给列表项的文本添加链接，如：
<ul> <li><a href="#">腊肉土豆焖饭</a></li> <li><a href="#">香辣风味炸鸡块</a></li> <li><a href="#">香菜皮蛋豆腐</a></li> <li><a href="#">荷兰豆炒马蹄</a></li> <li><a href="#">山楂排骨</a></li> <li><a href="#">韭菜炒河虾</a></li> </ul>
效果如下：
这样做有个不足之处，就是链接的点击区域只在文本上有效；但很多时候都希望在列表项的任何区域都具备可点击，这是就需要在链接标签上增加额外的样式：display：block；但在bootstrap框架中，还是采用了另一种实现方式，就是将ul.list-group用div.list-group来替换，li.list-group-item用a.list-group-item来替换，这样就可以达到需要的效果。
实现原理：
如果使用a.list-group-item,样式就需要做一定的处理，如：去文本下划线，增加悬浮效果等；下面是css源码：
a.list-group-item { color: #555; } a.list-group-item .list-group-item-heading { color: #333; } a.list-group-item:hover, a.list-group-item:focus { color: #555; text-decoration: none; background-color: #f5f5f5; }
带链接列表组的运用：