Bootstrap中的面板

面板

面板（Panels）是Bootstrap框架新增的一個組件，其主要做用就是用來處理一些其餘組件沒法完成的功能。一樣在不一樣的版本中具備不一樣的源碼：

☑  Less版本：對應的源碼文件是 panels.less

☑  Sass版本：對應的源碼文件是 _panels.scss

☑  編譯後的Bootstrap：對應bootstrap.css文件第4995行～第5302行

面板--基礎面板

基礎面板很是簡單，就是一個div容器運用了「panel」樣式，產生一個具備邊框的文本顯示塊。因爲「panel」不控制主題顏色，因此在「panel」的基礎上增長一個控制顏色的主題「panel-default」，另外在裏面添加了一個「div.panel-body」來放置面板主體內容：

<div class="panel panel-default">     <div class="panel-body">我是一個基礎面板，帶有默認主題樣式風格</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="panel panel-default">     <div>圖解CSS3</div>     <div>…</div>     <div>做者：H5EDU.cn</div> </div>

原理分析：

panel-heading和panel-footer也僅僅間距和圓角等樣式進行了設置：

/*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; }

面板--彩色面板

在基礎面板一節中瞭解到，panel樣式並無對主題進行樣式設置，而主題樣式是經過panel-default來設置。在Bootstrap框架中面板組件除了默認的主題樣式以外，還包括如下幾種主題樣式，構成了一個彩色面板：

☑  panel-primary：重點藍

☑  panel-success：成功綠

☑ panel-info:信息藍

☑ panel-warning：警告黃

☑ panel-danger：危險紅

使用方法就很簡單了，只須要在panel的類名基礎上增長本身須要的類名：

<div class="panel panel-default">     <div>圖解CSS3</div>     <div>…</div>     <div>做者：seashen</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>

從效果中不難發現，這幾個樣式只是改變了面板的背景色、文本和邊框顏色：具體源碼能夠查看bootstrap.css文件第5195行～第5302行

面板--面板中嵌套表格

通常狀況下能夠把面板理解爲一個區域，在使用面板的時候，都會在panel-body放置須要的內容，多是圖片、表格或者列表等。來看看面板中嵌套表格和列表組的一個效果。首先來看嵌套表格的效果：

<div class="panel panel-default">     <div>圖解CSS3</div>     <div>     <p>詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮佈局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的全部CSS3新特性     </p>     <table class="table table-bordered">         <thead>             <tr>                 <th>＃</th>                 <th>個人書</th>                 <th>發佈時間</th>             </tr>         </thead>         <tbody>             <tr>                 <td>1</td>                 <td>《圖解CSS3》</td>                 <td>2014-07-10</td>             </tr>         </tbody>     </table>     </div>     <div>做者：sea</div> </div>

優化代碼：

在實際應用運中，你或許但願表格和麪板邊緣不須要有任何的間距。但因爲panel-body設置了一個padding：15px的值，爲了實現這樣的效果。咱們在實際使用的時候須要把table提取到panel-body外面：

<div class="panel panel-default">     <div>圖解CSS3</div>     <div>…</div>     <table class="table table-bordered">…</table>     <div>做者：sea</div> </div>

這樣的效果是否是完美多了。你們可能會問，前面介紹表格的時候table-bordered明明有邊框，按理說這裏應該會出現邊框重疊效果纔對，怎麼沒有呢？其實本來是有邊框重疊的，只不過在面板中對錶格又作了一次優化。對應的代碼是bootstrap.css文件中第5054行～第5172行。

面板--面板中嵌套列表組

在上一節，咱們介紹瞭如何在面板中放置表格，如今咱們來學習如何在面板中放置列表組，咱們簡單的來看一個示例：

<div class="panel panel-default">     <div>圖解CSS3</div>     <div>         <p>詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮佈局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的全部CSS3新特性         </p>         <ul>             <li>我是列表項</li>             <li>我是列表項</li>             <li>我是列表項</li>         </ul>     </div>     <div>做者：sea</div> </div>

優化代碼：

和嵌套表格同樣，若是你以爲這樣有間距很差看，你徹底能夠把列表組提取出來：

<div class="panel panel-default">     <div>圖解CSS3</div>     <div>…</div>     <ul>         <li>我是列表項</li>         <li>我是列表項</li>         <li>我是列表項</li>     </ul>     <div>做者：sea</div> </div>

一樣的道理，Bootstrap將嵌套在面板中的列表組作了必定的樣式優化。具體源碼能夠查看bootstrap.css文件第5031行～第5053

行。