在基礎(chǔ)面板一節(jié)中了解到，panel樣式并沒(méi)有對(duì)主題進(jìn)行樣式設(shè)置，而主題樣式是通過(guò)panel-default來(lái)設(shè)置。在Bootstrap框架中面板組件除了默認(rèn)的主題樣式之外，還包括以下幾種主題樣式，構(gòu)成了一個(gè)彩色面板：
? panel-primary：重點(diǎn)藍(lán)
? panel-success：成功綠
? panel-info:信息藍(lán)
? panel-warning：警告黃
? panel-danger：危險(xiǎn)紅
使用方法就很簡(jiǎn)單了，只需要在panel的類(lèi)名基礎(chǔ)上增加自己需要的類(lèi)名：
<div class="panel panel-default">
<div class="panel-heading">圖解CSS3</div>
<div class="panel-body">…</div>
<div class="panel-footer">作者：大漠</div>
</div>
<div class="panel panel-primary">…</div>
<div class="panel panel-success">…</div>
<div class="panel panel-info">…</div>
<div class="panel panel-warning">…</div>
<div class="panel panel-danger">…</div>
運(yùn)行效果如下：
從效果中不難發(fā)現(xiàn)，這幾個(gè)樣式只是改變了面板的背景色、文本和邊框顏色：具體源碼可以查看bootstrap.css文件第5195行～第5302行。
我來(lái)試試：在右側(cè)修改代碼，以實(shí)現(xiàn)下面效果圖效果
請(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)