如何更改自举面板页脚颜色

Question

我有一个自举面板,我想像页眉一样改变页脚颜色.我panel-primary在panel-footer课堂旁边添加了,但只有顶部轮廓颜色变成了原色.那么,我该如何改变面板页脚的颜色呢？

代码:

<div class="panel panel-primary">
     <div class="panel-heading">                  
          Panel Heading
     </div><!--.panel-heading-->

     <div class="panel-body">
           Panel Body
     </div><!--.panel-body-->

     <div class="panel-footer panel-primary">
            Panel Footer
      </div><!--.panel-footer-->
</div>

Answer 1

您必须创建一个自定义类以应用于Panel-footer类:

请注意,在使用上下文变体时,面板页脚不会继承颜色和边框,因为它们不应位于前景中.查看文档.

.panel-footer.panel-custom {
    background: red;
    color: white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-primary">
    <div class="panel-heading">Panel Heading</div>
    <!--.panel-heading-->
    <div class="panel-body">Panel Body</div>
    <!--.panel-body-->
    <div class="panel-footer panel-custom">Panel Footer</div>
    <!--.panel-footer-->
</div>