本文爲 H5EDU 機構官方 HTML5培訓 教程，主要介紹： bootstrap教程（二） —— 列表組listgroup
列表組
列表組是Bootstrap框架新增的一個組件，可以用來製作列表清單、垂直導航等效果，也可以配合其他的組件製作出更漂亮的組件。由於其在Bootstrap是一個獨立的組件，所以也對應有自己獨立源碼：
LESS版本：對應的源碼文件 list-group.less
Sass版本：對應的源碼文件是 _list-group.scss
編譯出的Bootstrap版本：對應的源碼bootstrap.css文件第4820行～第4994行
列表組--基礎列表組
基礎列表組，看上去就是去掉了列表符號的列表項，並且配上一些特定的樣式。在Bootstrap框架中的基礎列表組主要包括兩個部分：
list-group：列表組容器，常用的是ul元素，當然也可以是ol或者div元素
list-group-item：列表項，常用的是li元素，當然也可以是div元素
來看一個簡單的示例：
<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>
運行效果如下：
list
原理分析：
對於基礎列表組並沒有做過多的樣式設置，主要設置了其間距，邊框和圓角等：
/*bootstrap.css文件第4820行～第4840行*/
.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;
}
列表組--帶徽章的列表組
帶徽章的列表組其實就是將Bootstrap框架中的徽章組件和基礎列表組結合在一起的一個效果。具體做法很簡單，只需要在“list-group-item”中添加徽章組件“badge”：
<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>
實現原理：
實現效果非常簡單，就是給徽章設置了一個右浮動，當然如果有兩個徽章同時在一個列表項中出現時，還設置了他們之間的距離：
/*bootstrap.css文件第4841行～第4846行*/
.list-group-item > .badge {
float: right;
}
.list-group-item > .badge + .badge {
margin-right: 5px;
}
列表組--帶鏈接的列表組
帶鏈接的列表組，其實就是每個列表項都具有鏈接效果。大家可能最初想到的就是在基礎列表組的基礎上，給列表項的文本添加鏈接：
<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>
這樣做有一個不足之處，就是鏈接的點擊區域只在文本上有效：
但很多時候，都希望在列表項的任何區域都具備可點擊。這個時候就需要在鏈接標籤上增加額外的樣式：“display:block”；
雖然這樣能解決問題，達到需求。但在Bootstrap框架中，還是採用了另一種實現方式。就是將ul.list-group使用div.list-group來替換，而li.list-group-item直接用a.list-group-item來替換。這樣就可以達到需要的效果：
<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>
原理實現：
如果使用a.list-group-item時，在樣式需要做一定的處理，比如說去文本下劃線，增加懸浮效果等：
/*bootstrap.css文件第4847行～第4858行*/
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;
}