整理自慕課筆記
列表組是Bootstrap框架新增的一個組件，可以用來制作列表清單、垂直導航等效果，也可以配合其他的組件制作出更漂亮的組件。
基礎列表組
基礎列表組，看上去就是去掉了列表符號的列表項，并且配上一些特定的樣式。在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>
帶徽章的列表組
帶徽章的列表組其實就是將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>
帶鏈接的列表組
帶鏈接的列表組，其實就是每個列表項都具有鏈接效果。大家可能最初想到的就是在基礎列表組的基礎上，給列表項的文本添加鏈接：
<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>
自定義列表組
Bootstrap框加在鏈接列表組的基礎上新增了兩個樣式：
* list-group-item-heading：用來定義列表項頭部樣式
* list-group-item-text：用來定義列表項主要內容
這兩個樣式最大的作用就是用來幫助開發者可以自定義列表項里的內容，如下面的示例：
<div class="list-group"> <a href="##" class="list-group-item"> <h4 class="list-group-item-heading">圖解CSS3</h4> <p class="list-group-item-text">...</p> </a> <a href="##" class="list-group-item"> <h4 class="list-group-item-heading">Sass中國</h4> <p class="list-group-item-text">...</p> </a></div>
列表項的狀態設置
Bootstrap框架也給組合列表項提供了狀態效果，特別是鏈接列表組。比如常見狀態和禁用狀態等。實現方法和前面介紹的組件類似，在列表組中只需要在對應的列表項中添加類名：
* active：表示當前狀態
* disabled：表示禁用狀態
來看個示例：
<div class="list-group"> <a href="##" class="list-group-item active"><span class="badge">5902</span>圖解CSS3</a> <a href="##" class="list-group-item"><span class="badge">15902</span>W3cplus</a> <a href="##" class="list-group-item"><span class="badge">59020</span>慕課網</a> <a href="##" class="list-group-item disabled"><span class="badge">0</span>Sass中國</a></div>
多彩列表組
列表組組件和警告組件一樣，Bootstrap為不同的狀態提供了不同的背景顏色和文本色，可以使用這幾個類名定義不同背景色的列表項。
* list-group-item-success：成功，背景色綠色
* list-group-item-info：信息，背景色藍色
* list-group-item-warning：警告，背景色為黃色
* list-group-item-danger：錯誤，背景色為紅色
如果你想給列表項添加什么背景色，只需要在“list-group-item”基礎上增加對應的類名：
<div class="list-group"> <a href="##" class="list-group-item active"><span class="badge">5902</span>圖解CSS3</a> <a href="##" class="list-group-item"><span class="badge">15902</span>W3cplus</a> <a href="##" class="list-group-item"><span class="badge">59020</span>慕課網</a> <a href="##" class="list-group-item disabled"><span class="badge">0</span>Sass中國</a></div>
如果大家還想深入學習，可以點擊這里進行學習，再為大家附3個精彩的專題：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
