4.19.2　带有头和尾的面板

基础面板看着稍微有点寒酸，所以Bootstrap作者又为其定义了面板头（panel-heading）和面板尾（panel-footer）样式，其功能是高亮显示相对应的面板头和面板尾。示例代码下：

  1. <div class="panel panel-default">
  2.     <div class="panel-heading">面板header</div>
  3. <div class="panel-body">
  4.         这里是面板内容
  5.     </div>
  6.     <div class="panel-footer">面板footer</div>
  7. </div>

上述示例的运行效果如图4-90所示。

4.19.2　带有头和尾的面板 - 图1 图4-90　带头部和尾部的面板效果

两个样式分别对边框、内外边距、背景色、圆角、字体大小、字体粗细进行了相应的设置。源码如下：

  1. // 源码4914行
  2. .panel-heading {                        /* 面板头部相关设置 */
  3.   padding: 10px 15px;
  4.   border-bottom: 1px solid transparent;
  5.   border-top-left-radius: 3px;
  6.   border-top-right-radius: 3px;
  7. }
  8. .panel-heading > .dropdown .dropdown-toggle {
  9.   color: inherit;                       /* 面板头部，如果有下拉菜单，继承父元素设置 */
  10. }
  11. .panel-title {                  /* 面板头部，放title标题，去除上下外边距，加大字体 */
  12.   margin-top: 0;
  13.   margin-bottom: 0;
  14.   font-size: 16px;
  15.   color: inherit;
  16. }
  17. .panel-title > a {
  18.   color: inherit;
  19. }
  20. .panel-footer {                 /* 面板底部相关设置 */
  21.   padding: 10px 15px;
  22.   background-color: #f5f5f5;    /* 面板底部背景色 */
  23.   border-top: 1px solid #ddd;
  24.   border-bottom-right-radius: 3px;
  25.   border-bottom-left-radius: 3px;
  26. }

通过上述代码，我们可以看出，底部footer设置了背景色，但是head却没有设置，这是因为头部head是跟随主题风格来设置的（比如pannel-default）。