如何更改引导程序面板页脚颜色

我有一个引导面板，并且我想更改页眉的颜色，如其标题。我在panel-footer类旁边添加了panel-primary，但只有改变为原色的顶部轮廓颜色。那么，我该如何改变面板页脚的颜色？如何更改引导程序面板页脚颜色

代码：

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

来源

2015-10-13 Bayu Anggara

注意，对于标题的背景色设置在'.panel-heading' ** **不'.panel-primary'。 – misterManSam

你必须创建一个自定义的类应用到面板尺类：

注意事项使用情境的变化时，因为它们并不意味着是在面板页脚不继承颜色和边框前景。见docs。

.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>

来源

2015-10-13 22:47:03 vanburen

也许你可以显示这些面板上的CSS？

很可能是因为另一个CSS标签比“panel-primary”标签具有更高的优先级。您可以尝试在Firefox/Chrome中使用网络开发者工具来显示覆盖它的内容。

来源

2015-10-13 22:46:04 kainr2

你必须改变适当CSS来实现这一目标。

默认为Bootatrap 3：

.panel-footer { 
    padding: 10px 15px; 
    background-color: #f5f5f5; 
    border-top: 1px solid #ddd; 
    border-bottom-right-radius: 3px; 
    border-bottom-left-radius: 3px; 
}

您可以覆盖这个风格（你不应该panel-primary类添加到panel-footer，因为引导CSS的结构）。

来源

2015-10-13 22:50:20 makshh

检查了这一点：

CSS

.panel-footer{ 
    background-color:#337ab7; 
    border-color: #337ab7; 
    color: #FFFFFF; 

}

我重写引导CSS，但这并不是一个很好的解决方案。更好的方法是宣布自己的班级，然后改变颜色。

jsfiddle

来源

2015-10-13 22:52:13

如何更改引导程序面板页脚颜色

回答

相关问题