在“list-group-item”基础上增加对应的类名即可：
list-group-item-success：成功绿
list-group-item-info：信息蓝
list-group-item-warning：警告黄
list-group-item-danger：错误红
实现原理其实仅仅是修改了背景、文本和边框的颜色而已。
面板
基础面板
基础面板就是div容器运用了“panel”样式，产生一个具有边框的文本显示块，然后在里面添加了一个“div.panel-body”来放置面板主体内容。由于“panel”不控制主题颜色，所以我们在“panel”的基础上增加一个控制颜色的主题“panel-default”。例如：
<div> <div>基础面板</div> </div>
实现源码如下：
.panel { margin-bottom: 20px; background-color: #fff; border: 1px solid transparent; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); box-shadow: 0 1px 1px rgba(0, 0, 0, .05); } .panel-body { padding: 15px; }
面板的头和尾
使用panel-heading和panel-footer即可。例如：
<div> <div>头部内容</div> <divpanel-footer">尾部内容</div> </div>
实现源码如下：
.panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-left-radius: 3px; border-top-right-radius: 3px; } .panel-heading > .dropdown .dropdown-toggle { color: inherit; } .panel-title { margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; } .panel-title > a { color: inherit; } .panel-footer { padding: 10px 15px; background-color: #f5f5f5; border-top: 1px solid #ddd; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; }
彩色面板
面板组件除了默认的主题样式panel-default之外，还有以下几种彩色主题样式：
panel-primary：重点蓝
panel-success：成功绿
panel-info：信息蓝
panel-warning：警告黄
panel-danger：危险红
例如：<div>…</div>
面板中嵌套表格
例如：
<div> <div>这里是标题</div> <div> <p>这里是正文</p> </div> <table> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> </thead> <tbody> <tr> <td>表内容1</td> <td>表内容2</td> <td>表内容3</td> </tr> </tbody> </table> <div>这里是尾巴</div> </div>
我们这里吧table放在和panel-body平级的地方。把table放在panel-body里面也可以，不过由于panel-body设置了一个padding：15px的值，所以那样的话表格和面板边缘会有一点间距，不太好看。
面板中嵌套列表组
例如：
<div> <div>这里是标题</div> <div> <p>这里是正文</p> </div> <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> <div>这里是尾巴</div> </div>