Bootstrap框架也給組合列表項提供了狀態(tài)效果，特別是鏈接列表組。比如常見狀態(tài)和禁用狀態(tài)等。實現(xiàn)方法和前面介紹的組件類似，在列表組中只需要在對應(yīng)的列表項中添加類名：
? active：表示當(dāng)前狀態(tài)
? disabled：表示禁用狀態(tài)
來看個示例：
<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>慕課網(wǎng)</a>
<a href="##" class="list-group-item disabled"><span class="badge">0</span>Sass中國</a>
</div>
運(yùn)行效果如下：
原理實現(xiàn)：
在樣式上主要對列表項的背景色和文本做了樣式設(shè)置：
/*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;
}
我來試試：在右側(cè)代碼編輯器中補(bǔ)充代碼，為列表項添加狀態(tài)
效果圖如下:
參考代碼如下：
<div class="list-group">
<a href="##" class="list-group-item active">性能優(yōu)化之PHP優(yōu)化<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">玩轉(zhuǎn)Bootstrap<span class="badge">0</span></a>
<a href="##" class="list-group-item">基于bootstrap的網(wǎng)頁開發(fā)<span class="badge">22</span></a>
</div>
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報