4.19.3　多彩面板

学习了那么多组件，发现几乎所有的组件都提供了多彩风格的显示，面板也不例外，分别提供了5种颜色：panel-primary（重点蓝）、panel-success（成功绿）、panel-warning（警告黄）、panel-danger（危险红）、panel-info（信息蓝）。

使用方式也非常简单，只需要在现有panel的样式上，附加一个颜色样式即可。示例代码如下：

  1. <div class="panel panel-primary">...</div>
  2. <div class="panel panel-success">...</div>
  3. <div class="panel panel-warning">...</div>
  4. <div class="panel panel-danger">...</div>
  5. <div class="panel panel-info">...</div>

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

首先对整个面板的边框进行设置，然后对面板头部进行相关的设置：比如头部内的文字颜色、背景颜色和头部本身的边框颜色。panel-default样式的源码如下（其他样式都类似）：

  1. // 源码4962行
  2. .panel-default {
  3.   border-color: #ddd;           /* 设置面板边框颜色 */
  4. }
  5. .panel-default > .panel-heading {       /* 面板头部相关的设置 */
  6.   color: #333;                  /* 文字颜色 */
  7.   background-color: #f5f5f5;    /* 背景颜色 */
  8.   border-color: #ddd;           /* 面板头的边框颜色 */
  9. }
  10. .panel-default > .panel-heading + .panel-collapse .panel-body {
  11.   border-top-color: #ddd;       /* 如果是折叠面板的话，设置顶部边框的颜色*/
  12. }
  13. .panel-default > .panel-footer + .panel-collapse .panel-body {
  14.   border-bottom-color: #ddd;    /* 如果是折叠面板的话，设置footer的底部边框颜色*/
  15. }

4.19.3　多彩面板 - 图1 图4-91　彩色面板效果

折叠面板将在第5章的5.10节细讲。