帶徽章的列表組其實就是將Bootstrap框架中的徽章組件和基礎列表組結合在一起的一個效果。具體做法很簡單，只需要在“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>
運行效果如下：
實現原理：
實現效果非常簡單，就是給徽章設置了一個右浮動，當然如果有兩個徽章同時在一個列表項中出現時，還設置了他們之間的距離：
/*bootstrap.css文件第4841行～第4846行*/
.list-group-item > .badge {
float: right;
}
.list-group-item > .badge + .badge {
margin-right: 5px;
}
我來試試：制作一個帶徽章的列表組
效果圖如下：
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報