面板是什麼？

面板就是可以將DOM元件放到一起的盒子，

建立基本面板

• 建立帶有class="panel"的<div>面板容器
• 為面板容器新增基本樣式，如：class="panel-primary"、class="panel-default"
• 在面板容器中建立標題<div>，class="panel-heading"
• 在面板容器中建立面板內容<div>，class="panel-body"

     <div class="panel panel-default">
         <div class="panel-heading">面板標題</div>
         <div class="panel-body">
             面板內容
         </div>
     </div>
 

執行結果

建立帶有指令碼標註的面板

• 在面板容器中建立帶有class="panel-footer"的<div>

     <div class="panel panel-default">
         <div class="panel-body">
             面板內容
         </div>
         <div class="panel-footer">
             面板標註
         </div>
     </div>

執行結果

建立不同樣式的面板

• 在面板容器中新增情景樣式類，如：class="panel-primary"

<div class="panel panel-default">
         <div class="panel-heading">
             預設面板標題
         </div>
         <div class="panel-body">
             預設面板內容
         </div>
     </div>
     <div class="panel panel-primary">
    <div class="panel-heading">面板標題</div>
    <div class="panel-body">面板內容</div>
</div>
 

執行結果

建立帶有表單的面板

• 在面板容器中新增表格
• 表格位置要在面板標題或者面板內容下

     <div class="panel panel-primary">
       <div class="panel-heading">面板標題</div>
         <table class="table">
             <th>產品</th><th>價格</th>
             <tr><td>產品A</td><td>2000</td></tr>
             <tr><td>產品B</td><td>5000</td></tr>
         </table>
    </div>

執行結果

建立帶有列表組的面板

• 同表格的格式一樣，列表組在面板容器內，在面板標題，面板內容後

     <div class="panel panel-primary">
       <div class="panel-heading">面板標題</div>
         <div class="panel-body">
             面板內容
         </div>
        <div class="list-group">
            <a class="list-group-item" href="#">
                好好吃飯
            </a>
            <a class="list-group-item" href="#">
                好好睡覺
            </a>
        </div>
    </div>

執行結果