## 面版 基礎面板非常簡單，就是一個div容器中運用了類.panel的樣式，產生一個具有邊框的文本顯示塊，由于panel不控制主題顏色，所以在.panel基礎上增加一個控制顏色的主題的類.panel-default,在里面添加一個div.panel-body來放置面板主體內容。 **默認樣式** 默認的`.panel`組件所做的只是設置基本的邊框（border）和內補（padding）來包含內容。其用法如下： ```html <div class="panel panel-default"> <div class="panel-body"> 默認樣式 </div> </div> ```  ***** **帶標題的面版** 通過`.panel-heading`可以很簡單地為面板加入一個標題容器。你也可以通過添加設置了`.panel-title`類的`<h1>`\-`<h6>`標簽，添加一個預定義樣式的標題。不過，`<h1>`\-`<h6>`標簽的字體大小將被`.panel-heading`的樣式所覆蓋。為了給鏈接設置合適的顏色，務必將鏈接放到帶有`.panel-title`類的標題標簽內。 ```html <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">面板標題</h3> </div> <div class="panel-body"> 面板內容 </div> </div> ```  ***** **帶尾部的面版** 把按鈕或次要的文本放入`.panel-footer`容器內。注意面版的腳注**不會**從情境效果中繼承顏色，因為他們并不是主要內容。 ```html <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">面板標題</h3> </div> <div class="panel-body"> 面板內容 </div> <div class="panel-footer">面板尾部</div> </div> ```  ***** **彩色面板** 由于.panel樣式并沒有對主題顏色進行樣式設置，bootstrap框架中的面板組件處理默認的主題（.panel-default）樣式之外，還包括以下幾種主題樣式： | 類 | 狀態 | | --- | --- | | `.panel-primary` | 重點??藍色 | | `.panel-success` |成功???綠色| | `.panel-info` |信息???藍色（淺的）| | `.panel-warning` |警告???黃色| | `.panel-danger` |危險???紅色| ```html <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">面板標題</h3> </div> <div class="panel-body"> 面板內容 </div> </div> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">面板標題</h3> </div> <div class="panel-body"> 面板內容 </div> </div> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title">面板標題</h3> </div> <div class="panel-body"> 面板內容 </div> </div> <div class="panel panel-danger"> <div class="panel-heading"> <h3 class="panel-title">面板標題</h3> </div> <div class="panel-body"> 面板內容 </div> </div> <div class="panel panel-warning"> <div class="panel-heading"> <h3 class="panel-title">面板標題</h3> </div> <div class="panel-body"> 面板內容 </div> </div> ```  ***** **面板中嵌套表格** 為面板中不需要邊框的表格添加`.table`類，是整個面板看上去更像是一個整體設計。如果是帶有`.panel-body`的面板，我們為表格的上方添加一個邊框，看上去有分隔效果。 ```html <div class="panel panel-warning"> <div class="panel-heading"> <h3 class="panel-title">面板標題</h3> </div> <div class="panel-body"> 面板內容 </div> <table class="table"> <tr> <th>#</th> <th>name</th> <th>age</th> </tr> <tr> <td>1</td> <td>麥克</td> <td>23</td> </tr> <tr> <td>2</td> <td>瑪麗</td> <td>20</td> </tr> <tr> <td>3</td> <td>莉莉</td> <td>21</td> </tr> </table> </div> ```  當然也可以在 .panel-body 中添加表格。 如果沒有`.panel-body`，面版標題會和表格連接起來，沒有空隙。效果如下：  ***** **帶列表組的面版** 可以簡單地在任何面版中加入具有最大寬度的列表組（.ist-group），用法如下： ```html <div class="panel panel-warning"> <div class="panel-heading"> <h3 class="panel-title">面板標題</h3> </div> <div class="panel-body"> 面板內容 </div> <div class="list-group"> <a class="list-group-item">item 1</a> <a class="list-group-item">item 2</a> <a class="list-group-item">item 3</a> <a class="list-group-item">item 4</a> </div> </div> ```