帶鏈接的列表組，其實就是每個列表項都具有鏈接效果。大家可能最初想到的就是在基礎(chǔ)列表組的基礎(chǔ)上，給列表項的文本添加鏈接：

<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>

運行效果如下：

這樣做有一個不足之處，就是鏈接的點擊區(qū)域只在文本上有效：

但很多時候，都希望在列表項的任何區(qū)域都具備可點擊。這個時候就需要在鏈接標(biāo)簽上增加額外的樣式：“display:block”；

雖然這樣能解決問題，達到需求。但在Bootstrap框架中，還是采用了另一種實現(xiàn)方式。就是將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">玩轉(zhuǎn)Bootstrap</a>
</div>

運行效果如下：

原理實現(xiàn)：

如果使用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;
}