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

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

運(yùn)行效果如下：

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

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

雖然這樣能解決問題，達(dá)到需求。但在Bootstrap框架中，還是采用了另一種實(shí)現(xiàn)方式。就是將ul.list-group使用div.list-group來替換，而li.list-group-item直接用a.list-group-item來替換。這樣就可以達(dá)到需要的效果：

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

運(yùn)行效果如下：

原理實(shí)現(xiàn)：

如果使用a.list-group-item時(shí)，在樣式需要做一定的處理，比如說去文本下劃線，增加懸浮效果等：

/*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;
}