Question

我使用的是来自Bootstrap的面板但是对于标题我想使用我自己的背景颜色作为标题。如果我没有为panel-heading提供div课程，那么布局就会变得紧张。所以我认为我应该保留panel-heading，然后找到一种方法来覆盖背景颜色。所以我决定创建一个自定义css类并使用background-color，然后使用panel-heading将其添加到div中。但这并没有产生任何影响。

知道如何覆盖面板的标题颜色吗？

代码：

<div class="panel panel-default">
  <div class="panel-heading custom_class" >
  </div>
</div>

Answer 1

这应该有效：

.panel > .panel-heading {
    background-image: none;
    background-color: red;
    color: white;

}

Answer 2

您可以为面板标题创建自定义类。使用此css类可以设置面板标题的样式。我有一个简单的小提琴。

HTML：

<div class="panel panel-default">
   <div class="panel-heading panel-heading-custom">
       <h3 class="panel-title">Panel title</h3>
   </div>
   <div class="panel-body">
       Panel content
   </div>
</div>

CSS：

.panel-default > .panel-heading-custom {
background: #ff0000; color: #fff; }

演示链接：

http://jsfiddle.net/kiranvarthi/t1Lq966k/

Answer 3

如何创建自己的自定义面板类？这样你就不用担心重写Bootstrap。

<强> HTML

<div class="panel panel-custom-horrible-red">
   <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
   </div>
   <div class="panel-body">
      Panel content
    </div>
</div>

<强> CSS

.panel-custom-horrible-red {
    border-color: #ff0000;
}
.panel-custom-horrible-red > .panel-heading {
    background: #ff0000; 
    color: #ffffff;
    border-color: #ff0000;
}

小提琴： https://jsfiddle.net/x05f4crg/1/

Answer 4

Bootstrap有时会使用上下文类构造。这些是您应该改变样式的目标。

根据Kiran Varti的回答，您不需要创建自己的自定义类。

所以你只需要：

CSS：

.panel-default > .panel-heading {
  background: #black;
}

HTML：

<div class="panel panel-default">

解释here。另请参阅上下文类部分here。

匹配navbar-inverse使用＃222。 V3中的Panel-inverse为requested，但由于优先级较高而被拒绝。

您可以更改该标题覆盖中的前景色，也可以单独为面板标题执行此操作。取决于你想要实现的目标。

.panel-title {
  color: white;
}

Answer 5

更改颜色的另一种方法是使用bootstrap类在面板中删除默认类并替换。

示例：

<div class="panel panel-danger">
  <div class="panel-heading">
  </div>
</div>

Answer 6

您只需在面板中添加id属性即可。喜欢这个

<div class="panel-heading" id="mypanelId">Hello world </div>

然后在您的自定义CSS文件中：

#mypanelId{
    background-image: none;
    background: rgba(22, 20, 100, 0.8);
    color: white;
     }

Answer 7

我尝试使用自定义面板类，但它不起作用。所以对于那些像我一样挣扎的人，你可以使用inline CSS，它对我来说很好。

以下是我的代码：

<div class="panel-heading" style="background-image:none;background: #a4c6ff;">

Answer 8

我假设custom_class是你的类来覆盖面板的标题颜色。只需添加！重要的内容或添加内联样式或id并添加样式，因为它们将比类添加的样式更具特异性。

与！important

.custom_class { background-color：red！important; }
与！important
ID：

#custom_id { 背景颜色：红色; }

- 内联样式：

<div id="custom_id" class="panel panel-default">
      <div class="panel-heading custom_class" style="background-color:red">
      </div>
    </div>

Answer 9

.panel-default >.panel-heading
{
    background: #ffffff;
}

这对我来说可以将颜色更改为白色。

Answer 10

检查引导程序。 CSS并搜索类面板标题并复制默认代码。

将默认CSS复制到您的个人CSS，但是例如，可以使用像my-panel-header这样的差异类名。

从创建的新克隆类编辑css代码。

Answer 11

使用它：

.panel-heading {
    background-color: #ececb0 !important;
}

如何覆盖Bootstrap面板标题背景颜色？

11 个答案: