基礎(chǔ)面板看上去太簡(jiǎn)單了，Bootstrap為了豐富面板的功能，特意為面板增加“面板頭部”和“頁面尾部”的效果：

   ?  panel-heading：用來設(shè)置面板頭部樣式

   ? panel-footer：用來設(shè)置面板尾部樣式

<div class="panel panel-default">
    <div class="panel-heading">圖解CSS3</div>
    <div class="panel-body">…</div>
    <div class="panel-footer">作者：大漠</div>
</div>

運(yùn)行效果如下：

原理分析：

panel-heading和panel-footer也僅僅間距和圓角等樣式進(jìn)行了設(shè)置：

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