详解Bootstrap列表组组件
列表组可以⽤来制作列表清单、垂直导航等效果，也可以配合其他的组件制作出更漂亮的组件，列表组在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 class="list-group">
<li class="list-group-item">腊⾁⼟⾖焖饭</li>
<li class="list-group-item">⾹辣风味炸鸡块</li>
<li class="list-group-item">⾹菜⽪蛋⾖腐</li>
<li class="list-group-item">荷兰⾖炒马蹄</li>
<li class="list-group-item">⼭楂排⾻</li>
少儿英语口语视频<li class="list-group-item">⾲菜炒河虾</li>
</ul>
带徽章的列表组其实就是将bootstrap框架中的徽章组件和基础列表组件结合在⼀起的⼀个效果，具体做法很简单，只需在.list-group-item的基础上追加徽章组件“badge”
实现原理：
给徽章设置了⼀个右浮动，当然如果两个徽章同时在⼀个列表项中出现时，还设置了它们之间的距离
.list-group-item > .badge {
float: right;
}
.list-group-item > .badge + .badge {
margin-right: 5px;
}
例⼦：
<h1>带徽章的列表组</h1>
<ul class="list-group">
<li class="list-group-item">
<span class="badge">13</span>
腊⾁⼟⾖焖饭
</li>
<li class="list-group-item">
<span class="badge">20</span>
⾹辣风味炸鸡块
</li>
<li class="list-group-item">
<span class="badge">12</span>
⾹菜⽪蛋⾖腐
</li>
<li class="list-group-item">
<span class="badge">5</span>
荷兰⾖炒马蹄
</li>
<li class="list-group-item">
<span class="badge">8</span>
⼭楂排⾻
</li>
<li class="list-group-item">
<span class="badge">15</span>
⾲菜炒河虾
</li>
</ul>
带连接的列表组其实就是每个列表项都具有链接效果，⼀般让⼈想到的就是在基础列表组的基础上，给列表项的⽂本添加链接，如：
<ul class="list-group">
<li class="list-group-item"><a href="#">腊⾁⼟⾖焖饭</a></li>
<li class="list-group-item"><a href="#">⾹辣风味炸鸡块</a></li>
<li class="list-group-item"><a href="#">⾹菜⽪蛋⾖腐</a></li>
<li class="list-group-item"><a href="#">荷兰⾖炒马蹄</a></li>
<li class="list-group-item"><a href="#">⼭楂排⾻</a></li>
<li class="list-group-item"><a href="#">⾲菜炒河虾</a></li>
</ul>
效果如下：
这样做有个不⾜之处，就是链接的点击区域只在⽂本上有效；但很多时候都希望在列表项的任何区域都具备可点击，这是就需要在链接标签上增加额外的样式：display：block；但在bootstrap框架中，还是采⽤了另⼀种实现⽅式，就是将ul.list-group⽤div.list-group来替换，li.list-group-item⽤a.list-group-item来替换，这样就可以达到需要的效果。reconciliation
实现原理：
如果使⽤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;
}
带链接列表组的运⽤：
集装箱 英文
<h1>带链接的列表组</h1>
<ul class="list-group">
<a class="list-group-item" href="#">腊⾁⼟⾖焖饭</a>
<a class="list-group-item" href="#">⾹辣风味炸鸡块</a>
<a class="list-group-item" href="#">⾹菜⽪蛋⾖腐</a>
<a class="list-group-item" href="#">荷兰⾖炒马蹄</a>
<a class="list-group-item" href="#">⼭楂排⾻</a>
<a class="list-group-item" href="#">⾲菜炒河虾</a>
</ul>
效果如下：
bootstrap框架在链接列表组的基础上增加了两个样式：
.list-group-item-heading:⽤来定义列表项头部样式
.list-group-item-text:⽤来定义列表项主要内容
这两个样式最⼤的作⽤就是⽤来帮组开发者可以⾃定义列表项⾥的内容
实现原理：
这两个样式主要控制不容状态下的⽂本颜⾊，下⾯是css源码：
a.list-group-item .list-group-item-heading {
color: #333;
}
.list-group-item.disabled .list-group-item-heading,
.list-group-item.disabled:hover .list-group-item-heading,你好吗日语
.list-group-item.disabled:focus .list-group-item-heading {
color: inherit;
}
.list-group-item.disabled .list-group-item-text,
.
list-group-item.disabled:hover .list-group-item-text,
.list-group-item.disabled:focus .list-group-item-text {
color: #777;
}
.list-group-item.active .list-group-item-heading,
.list-group-item.active:hover .list-group-item-heading,
.list-group-item.active:focus .list-group-item-heading,
.list-group-item.active .list-group-item-heading > small,
.list-group-item.active:hover .list-group-item-heading > small,
.list-group-item.active:focus .list-group-item-heading > small,
.list-group-item.active .list-group-item-heading > .small,
.
list-group-item.active:hover .list-group-item-heading > .small,
.list-group-item.active:focus .list-group-item-heading > .small {
color: inherit;
}
.list-group-item.active .list-group-item-text,
.list-group-item.active:hover .list-group-item-text,
.list-group-item.active:focus .list-group-item-text {
color: #e1edf7;
}
.list-group-item-heading {
margin-top: 0;
margin-bottom: 5px;
}
.list-group-item-text {
margin-bottom: 0;
line-height: 1.3;
}
⾃定义列表组的运⽤
<h1>⾃定义列表组</h1>
谓语<ul class="list-group">
<a class="list-group-item">
cock是什么意思<h4 class="list-group-item-heading">列表1标题</h4>
<p class="list-group-item-text">列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容</p>
</a>
<a class="list-group-item">
<h4 class="list-group-item-heading">列表2标题</h4>
<p class="list-group-item-text">列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容</p>
</a>
<a class="list-group-item">
<h4 class="list-group-item-heading">列表3标题</h4>
<p class="list-group-item-text">列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容</a>
<a class="list-group-item">
<h4 class="list-group-item-heading">列表4标题</h4>
<p class="list-group-item-text">列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容</p> </a>
<a class="list-group-item">
<h4 class="list-group-item-heading">列表5标题</h4>
<p class="list-group-item-text">列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容</p>
</a>
<a class="list-group-item">
<h4 class="list-group-item-heading">列表6标题</h4>
<p class="list-group-item-text">列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容</a>
</ul>
bootstrap框架中也给组合列表项提供了状态效果，特别是链接列表组，实现⽅法和前⾯介绍的组件类似，在列表组中只需在对应的列表项中添加类名：.active(表⽰当前状态)、
.disabled（表⽰禁⽤状态）
实现原理：
在样式上主要对列表项的背景⾊和⽂本做了样式设置，下⾯是css源码：
.list-group-item.disabled,
.list-group-item.disabled:hover,
.
list-group-item.disabled:focus {
color: #777;
background-color: #eee;
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
z-index: 2;
color: #fff;man at arms
background-color: #428bca;
border-color: #428bca;
}
例⼦：
<h1>列表组状态设置</h1>
<ul class="list-group">
<a class="list-group-item active">
<h4 class="list-group-item-heading">列表1标题</h4>
<p class="list-group-item-text">列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容列表1内容</p>
</a>
<a class="list-group-item">
<h4 class="list-group-item-heading">列表2标题</h4>
win the day
<p class="list-group-item-text">列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容列表2内容</p>
</a>
<a class="list-group-item disabled">
<h4 class="list-group-item-heading">列表3标题</h4>
<p class="list-group-item-text">列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容列表3内容</a>
<a class="list-group-item">
<h4 class="list-group-item-heading">列表4标题</h4>
<p class="list-group-item-text">列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容列表4内容</p> </a>
<a class="list-group-item">
<h4 class="list-group-item-heading">列表5标题</h4>
<p class="list-group-item-text">列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容列表5内容</p>
</a>
<a class="list-group-item">
<h4 class="list-group-item-heading">列表6标题</h4>
<p class="list-group-item-text">列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容列表6内容</a>
</ul>
效果如下（第三个列表项是禁⽤状态，⿏标移放在它上⾯有个禁⽤图标，这⾥是直接截的图，看不到这个效果）：
列表组组件和警告组件⼀样，bootstrap为不同的状态提供了不同的背景⾊和⽂本⾊，可以使⽤这⼏个类名定义不同背景⾊的列表项：
.list-group-item-success：成功绿⾊（背景⾊）
.list-group-item-info：信息蓝⾊（背景⾊）
.list-group-item-warning：警告黄⾊（背景⾊）
.list-group-item-danger：错误红⾊（背景⾊）
实现原理：
这⼏个类名仅修改了背景⾊和⽂本⾊，对应的源码如下：
.list-group-item-success {
color: #3c763d;
background-color: #dff0d8;
}
a.list-group-item-success {
color: #3c763d;
}
a.list-group-item-success .list-group-item-heading {
color: inherit;
}
a.list-group-item-success:hover,
a.list-group-item-success:focus {
color: #3c763d;
background-color: #d0e9c6;
}
a.list-group-item-success.active,
a.list-group-item-success.active:hover,
a.list-group-item-success.active:focus {
color: #fff;
background-color: #3c763d;
border-color: #3c763d;
}
其它状态样式代码请查看源码⽂件，如果想给列表项添加背景⾊，只需在类.lis-group-item的基础上追加对应的类名即可。多彩列表组的运⽤：
<h1>多彩列表组</h1>
<ul class="list-group">
<a href="#" class="list-group-item active">
如你所愿英文
列表项1
<span class="badge">10</span>atmosphere
</a>
<a href="#" class="list-group-item list-group-item-success">
列表项1
<span class="badge">10</span>
</a>
<a href="#" class="list-group-item list-group-item-info">
列表项1
<span class="badge">10</span>
</a>
<a href="#" class="list-group-item list-group-item-warning">
列表项1
<span class="badge">10</span>
</a>
<a href="#" class="list-group-item list-group-item-danger">
列表项1
<span class="badge">10</span>
</a>
</ul>
效果如下：
