（1）預設的 .panel 元件所做的只是設定基本的邊框（border）和內補（padding）來包含內容。

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

         （2）帶標題的面版通過 .panel-heading 可以很簡單地為面板加入一個標題容器。你也可以通過新增設定了 .panel-title 類的 <h1>-<h6> 標籤，新增一個預定義樣式的標題。不過，<h1>

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>
 

      （3）帶表格的面版為面板中不需要邊框的表格新增 .table 類，是整個面板看上去更像是一個整體設計。如果是帶有 .panel-body 的面板，我們為表格的上方新增一個邊框，看上去有分隔效果。

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>
 

 2、面板樣式自定義修改

     自帶的Bootstrap樣子總是方方正正的，這很官方，在很多時候並不能滿足設計的需求，這就是考驗工程師能力的時候了。有經驗的往往可以化腐朽為神奇，看下面這個，你能相信這是一個panel嗎？

        要說到自定義的方式，在根本上還是要修改css樣式 ： Panel還是那個panel:

             <div class="panel panel-czbk actived">
                <div class="panel-heading">Panel heading without title</div>
                <div class="panel-body">
                  <h4>新手體驗表0008期</h4>
                  <div class="row">
                    <div class="col-xs-6 text-left">
                      <p>起步價</p>
                      <p><strong>1000.00</strong><sub>萬</sub></p>
                    </div>
                    <div class="col-xs-6 text-right">
                      <p>起步價</p>
                      <p><strong>1000.00</strong><sub>萬</sub></p>
                    </div>
                    <div class="col-xs-6 text-left">
                      <p>起步價</p>
                      <p><strong>1000.00</strong><sub>萬</sub></p>
                    </div>
                    <div class="col-xs-6 text-right">
                      <p>起步價</p>
                      <p><strong>1000.00</strong><sub>萬</sub></p>
                    </div>
                  </div>
                </div>
              </div>

 但CSS檔案已經不再是原來的那個CSS了

.panel-czbk {
  border: 0;
  border-radius: 0;
  box-shadow: 1px 1px 5px #ccc;
}

.panel-czbk.actived {
  background-color: #e92322;
  color: #fff;
}

.panel-czbk.actived::before {
  content: "\e915";
  font-family: itcast;
  font-size: 50px;
  position: absolute;
  top: -11px;
  left: 15px;
}

.panel-czbk.disabled {
  background-color: #e0e0e0;
}

.panel-czbk > .panel-heading {
  float: right;
  width: 120px;
  padding: 0;
  height: 150px;
  border-left: 1px dashed #c0c0c0;
  text-align: center;
  position: relative;
}

.panel-czbk > .panel-heading::before,
.panel-czbk > .panel-heading::after {
  content: ' ';
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background-color: #f0f0f0;
  position: absolute;
}

.panel-czbk > .panel-heading::before {
  top: -8px;
  left: -8px;
}

.panel-czbk > .panel-heading::after {
  bottom: -8px;
  left: -8px;
  box-shadow: 0 2px 1px #ccc inset;
}

.panel-czbk > .panel-body {
  margin-right: 120px;
  height: 150px;
}

.panel-czbk > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #ddd;
}

.panel-czbk > .panel-heading .badge {
  color: #f5f5f5;
  background-color: #333;
}

 3、接下來是一款很棒的外掛，為面板添加了豐富的功能，包括拖拽、縮放、全屏、重新整理顯示、最小化等多樣的功能，它就是LobiPanel，好不好用看效果就知道了。

      右上角的功能鍵就是外掛所能提供的功能，但缺點是不能自定義功能，只能全部新增(這個也許只是我不會而已)。使用起來也很方便,只要引入相應的JS和CSS框架即可，包括jquery，jquery ui相關檔案和bootstrap相關檔案，以及lobipanel.css和lobipanel.js檔案。

<link rel="stylesheet" href="lib/jquery-ui.min.css"/>
<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="dist/css/lobipanel.min.css"/>
 
<script src="lib/jquery.1.11.min.js"></script>
<script src="lib/jquery-ui.min.js"></script>
<script src="bootstrap/dist/js/bootstrap.min.js"></script>
<script src="dist/js/lobipanel.min.js"></script>

 結構是標準的panel結構：

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-title">
            <h4>Panel title</h4>
        </div>
    </div>
    <div class="panel-body">
        Lorem ipsum...
    </div>
</div>   

       之後就是初始化：

 
 $("#2d").lobiPanel({
        //配置引數
        sortable: true,
        minWidth: 300,
        minHeight: 300,
        maxWidth: 2600,
        maxHeight: 2480,
        unpin: {
            tooltip: '拖動'
        },
        reload: {
            tooltip: '重新載入'
        },
        minimize: {
            tooltip: '最小化'
        },
        close: {
            tooltip: '關閉'
        },
        editTitle: {
            tooltip: '停止編輯'
        },
        expand: {
            tooltip: '全屏'
        }
    });
    //修改引數的方式
    $("#2d").lobiPanel('enableResize');
    $("#2d").lobiPanel('unpin');
    $("#2d").lobiPanel("setSize", 560, 432);
    $("#2d").lobiPanel("setPosition", 1000, 100);

       這樣就可以使用了，似不似很方便啊! 

下附外掛資源和學習資料：