帶鏈接的列表組，其實就是每個列表項都具有鏈接效果。大家可能最初想到的就是在基礎列表組的基礎上，給列表項的文本添加鏈接：
<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;
}
我來試試：制作一個帶鏈接的列表組。
要求：可以使用兩種方法的任意一種。
效果圖如下：
參考代碼如下：
<div class="list-group">
<a href="#" class="list-group-item">性能優化之PHP優化<span class="badge">23</span></a>
<a href="#" class="list-group-item">Canvas繪圖詳解<span class="badge">34</span></a>
<a href="#" class="list-group-item">玩轉Bootstrap<span class="badge">5</span></li>
<a href="#" class="list-group-item">基于bootstrap的網頁開發<span class="badge">13</span></a>
</div>
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報