深入理解BootStrap-- 皮膚(panel)

1、皮膚

皮膚（Panels）是Bootstrap框架新增的一個元件，其主要作用就是用來處理一些其他元件無法完成的功能。同樣在不同的版本中具有不同的原始碼：

☑ Less版本：對應的原始碼檔案是 panels.less

☑ Sass版本：對應的原始碼檔案是 _panels.scss

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

2、皮膚–基礎皮膚

基礎皮膚非常簡單，就是一個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;
}

3、皮膚–帶有頭和尾的皮膚

基礎皮膚看上去太簡單了，Bootstrap為了豐富皮膚的功能，特意為皮膚增加“皮膚頭部”和“頁面尾部”的效果：

☑ panel-heading：用來設定皮膚頭部樣式

☑ panel-footer：用來設定皮膚尾部樣式

<div class="panel panel-default">
    <div class="panel-heading">圖解CSS3</div>
    <div class="panel-body">…</div>
    <div class="panel-footer">作者：大漠</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;
}

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>
<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行。

5、皮膚–皮膚中巢狀列表組

在上一節，我們介紹瞭如何在皮膚中放置表格，現在我們來學習如何在皮膚中放置列表組，我們簡單的來看一個示例：

<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行。