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.css文件第4859行～第4864行*/
.list-group-item.disabled,
.list-group-item.disabled:hover,
.list-group-item.disabled:focus {
color: #777;
background-color: #eee;
}
/*bootstrap.css文件第4875行～第4882行*/
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
z-index: 2;
color: #fff;
background-color: #428bca;
border-color: #428bca;
}
我來試試：在右側代碼編輯器中補充代碼，為列表項添加狀態
效果圖如下:
參考代碼如下：
<div class="list-group">
<a href="##" class="list-group-item active">性能優化之PHP優化<span class="badge">10</span></a>
<a href="##" class="list-group-item">Canvas繪圖詳解<span class="badge">3</span></li>
<a href="##" class="list-group-item disabled">玩轉Bootstrap<span class="badge">0</span></a>
<a href="##" class="list-group-item">基于bootstrap的網頁開發<span class="badge">22</span></a>
</div>
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報