基礎(chǔ)面板非常簡(jiǎn)單，就是一個(gè)div容器運(yùn)用了“panel”樣式，產(chǎn)生一個(gè)具有邊框的文本顯示塊。由于“panel”不控制主題顏色，所以在“panel”的基礎(chǔ)上增加一個(gè)控制顏色的主題“panel-default”，另外在里面添加了一個(gè)“div.panel-body”來(lái)放置面板主體內(nèi)容：

<div class="panel panel-default">
 <div class="panel-body">我是一個(gè)基礎(chǔ)面板，帶有默認(rèn)主題樣式風(fēng)格</div>
</div>

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

原理分析：

“panel“主要對(duì)邊框，間距和圓角做了一定的設(shè)置：

/bootstrap.css文件第4995行～第5005行/

.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;
}

3、面板–帶有頭和尾的面板

基礎(chǔ)面板看上去太簡(jiǎn)單了，Bootstrap為了豐富面板的功能，特意為面板增加“面板頭部”和“頁(yè)面尾部”的效果：

☑ panel-heading：用來(lái)設(shè)置面板頭部樣式

☑ panel-footer：用來(lái)設(shè)置面板尾部樣式

<div class="panel panel-default">
 <div class="panel-heading">圖解CSS3</div>
 <div class="panel-body">…</div>
 <div class="panel-footer">作者：大漠</div>
</div>

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

原理分析：

panel-heading和panel-footer也僅僅間距和圓角等樣式進(jìn)行了設(shè)置：

/bootstrap.css文件第5006行～第5030行/

.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;
}

4、面板–彩色面板

在基礎(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的類名基礎(chǔ)上增加自己需要的類名：

<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行。

5、面板–面板中嵌套列表組

在上一節(jié)，我們介紹了如何在面板中放置表格，現(xiàn)在我們來(lái)學(xué)習(xí)如何在面板中放置列表組，我們簡(jiǎn)單的來(lái)看一個(gè)示例：

<div class="panel panel-default">
 <div class="panel-heading">圖解CSS3</div>
 <div class="panel-body">
 <p>詳細(xì)講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過(guò)渡、動(dòng)畫(huà)、媒體、響應(yīng)Web設(shè)計(jì)、Web字體等主題下涵蓋的所有CSS3新特性
 </p>
 <ul class="list-group">
 <li class="list-group-item">我是列表項(xiàng)</li>
 <li class="list-group-item">我是列表項(xiàng)</li>
 <li class="list-group-item">我是列表項(xiàng)</li>
 </ul>
 </div>
 <div class="panel-footer">作者：大漠</div>
</div>

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

優(yōu)化代碼：

和嵌套表格一樣，如果你覺(jué)得這樣有間距不好看，你完全可以把列表組提取出來(lái)：

<div class="panel panel-default">
 <div class="panel-heading">圖解CSS3</div>
 <div class="panel-body">…</div>
 <ul class="list-group">
 <li class="list-group-item">我是列表項(xiàng)</li>
 <li class="list-group-item">我是列表項(xiàng)</li>
 <li class="list-group-item">我是列表項(xiàng)</li>
 </ul>
 <div class="panel-footer">作者：大漠</div>
</div>

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