帶徽章的列表組其實(shí)就是將Bootstrap框架中的徽章組件和基礎(chǔ)列表組結(jié)合在一起的一個效果。具體做法很簡單，只需要在“list-group-item”中添加徽章組件“badge”：
<ul class="list-group">
<li class="list-group-item">
<span class="badge">13</span>揭開CSS3的面
</li>
<li class="list-group-item">
<span class="badge">456</span>CSS3選擇器
</li>
<li class="list-group-item">
<span class="badge">892</span>CSS3邊框
</li>
<li class="list-group-item">
<span class="badge">90</span>CSS3背景
</li>
<li class="list-group-item">
<span class="badge">1290</span>CSS3文本
</li>
</ul>
運(yùn)行效果如下：
實(shí)現(xiàn)原理：
實(shí)現(xiàn)效果非常簡單，就是給徽章設(shè)置了一個右浮動，當(dāng)然如果有兩個徽章同時在一個列表項(xiàng)中出現(xiàn)時，還設(shè)置了他們之間的距離：
/*bootstrap.css文件第4841行～第4846行*/
.list-group-item > .badge {
float: right;
}
.list-group-item > .badge + .badge {
margin-right: 5px;
}
我來試試：制作一個帶徽章的列表組
效果圖如下：
請驗(yàn)證，完成請求
由于請求次數(shù)過多，請先驗(yàn)證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)