列表組組件和警告組件一樣，Bootstrap為不同的狀態(tài)提供了不同的背景顏色和文本色，可以使用這幾個(gè)類名定義不同背景色的列表項(xiàng)。

  ?  list-group-item-success：成功，背景色綠色

  ?  list-group-item-info：信息，背景色藍(lán)色

  ?  list-group-item-warning：警告，背景色為黃色

  ?  list-group-item-danger：錯(cuò)誤，背景色為紅色

如果你想給列表項(xiàng)添加什么背景色，只需要在“list-group-item”基礎(chǔ)上增加對(duì)應(yīng)的類名：

<div class="list-group">
    <a href="##" class="list-group-item active"><span class="badge">5902</span>圖解CSS3</a>
    <a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>
    <a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>慕課網(wǎng)</a>
    <a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中國</a>
    <a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a>
</div>

運(yùn)行效果如下：

原理實(shí)現(xiàn)：

同樣的，這幾個(gè)類名僅修改了背景色和文本色，對(duì)應(yīng)的源碼為：boostrap.css文件第4899行～第4986行：

.list-group-item-success {
  color: #3c763d;
  background-color: #dff0d8;
}
a.list-group-item-success {
  color: #3c763d;
}
a.list-group-item-success .list-group-item-heading {
  color: inherit;
}
a.list-group-item-success:hover,
a.list-group-item-success:focus {
  color: #3c763d;
  background-color: #d0e9c6;
}
a.list-group-item-success.active,
a.list-group-item-success.active:hover,
a.list-group-item-success.active:focus {
  color: #fff;
  background-color: #3c763d;
  border-color: #3c763d;
}

由于篇幅問題，其它狀態(tài)樣式代碼請(qǐng)查看源碼文件。