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