在bootstrap中，panel指的是「面板」元件，用於將DOM元件插入到一個盒子中；建立該元件，只需在div元素上添加「panel」和「panel-xxx」樣式即可，會產生具有邊框的文字顯示區塊，「panel-xxx」樣式用於設定主題顏色。
本教學操作環境：Windows7系統、bootsrap3.3.7版、DELL G3電腦
1、面板
#面板（Panels）是Bootstrap框架新增的一個元件，其主要作用就是用來處理一些其他元件無法完成的功能。同樣在不同的版本中具有不同的源碼：
☑ Less版本：對應的源碼檔案是panels.less
##☑
Sass版本：對應的原始碼檔案是_panels.scss
☑ 編譯後的
Bootstrap：對應bootstrap.css檔案第4995行～第5302行
2、面板–基礎面板
基礎面板非常簡單，就是一個
div容器運用了「panel」樣式，產生一個具有邊框的文字顯示區塊。由於“panel”不控制主題顏色，所以在“panel”的基礎上增加一個控制顏色的主題“panel-default”，另外在裡面新增了一個「dpanel-body」樣式的div來放置面板主體內容：
<div>
<div>我是一个基础面板，带有默认主题样式风格</div>
</div>
登入後複製
運行效果如下：
## 原理分析：
「
panel
「主要對邊框，間距和圓角做了一定的設定：
/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;
}登入後複製
基礎面板看起來太簡單了，
Bootstrap
為了豐富面板的功能，刻意為面板增加「面板頭部」和「頁面尾部」的效果：
panel-heading
：用來設定面板頭部樣式
panel-footer
：用來設定面板尾部樣式<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><div class="panel panel-default">
<div class="panel-heading">图解CSS3</div>
<div class="panel-body">…</div>
<div class="panel-footer">作者：大漠</div>
</div></pre><div class="contentsignin">登入後複製</div></div>運行效果如下：
## 原理分析：
## panel-heading
和
panel-footer
也只是間距和圓角等樣式進行了設定：/bootstrap.css檔案
第5006行～第5030行
/<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false;">.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;
}</pre><div class="contentsignin">登入後複製</div></div>4、面板–彩色面板在基礎面板一節中了解到，
panel
樣式並沒有對主題進行樣式設置，而主題樣式是透過
panel-default
來設定。在Bootstrap框架中面板元件除了預設的主題樣式之外，還包括以下幾種主題樣式，構成了一個彩色面板：panel-primary ：重點藍色
☑ panel-success：成功綠色
☑ panel-info:訊息藍色
☑ panel-warning：警告黃
☑ panel-danger：危險紅
使用方法就很簡單了，只需要在panel的類別名稱基礎上增加自己需要的類別名稱：
<div class="panel panel-default">
<div class="panel-heading">图解CSS3</div>
<div class="panel-body">…</div>
<div class="panel-footer">作者：大漠</div>
</div>
…
…
…
…
…
登入後複製
運行效果如下：
從效果中不難發現，這幾個樣式只是改變了面板的背景色、文字和邊框顏色：具體原始碼可以查看
bootstrap.css
檔案
第5195行～第5302行
。
<div class="panel panel-default">
<div class="panel-heading">图解CSS3</div>
<div class="panel-body">
<p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
</p>
<ul class="list-group">
<li class="list-group-item">我是列表项</li>
<li class="list-group-item">我是列表项</li>
<li class="list-group-item">我是列表项</li>
</ul>
</div>
<div class="panel-footer">作者：大漠</div>
</div>登入後複製
運行效果如下：
# 最佳化程式碼：
和巢狀表格一樣，如果你覺得這樣有間距不好看，你完全可以把列表組提取出來：
<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">我是列表项</li>
<li class="list-group-item">我是列表项</li>
<li class="list-group-item">我是列表项</li>
</ul>
<div class="panel-footer">作者：大漠</div>
</div>登入後複製
運行效果如下：
同樣的道理，
Bootstrap
將嵌套在面板中的列表組做了一定的樣式優化。具體原始碼可以查看
bootstrap.css
檔案第5031行～第5053行。
以上是bootstrap panel是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
