Twitter bootstrap 蔚蓝颜色面板答案

【问题标题】：Twitter bootstrap cerulean color panelsTwitter bootstrap 蔚蓝颜色面板
【发布时间】：2015-08-24 08:50:44
【问题描述】：

我正在使用 Twitter Bootstrap Cerulean 模板。

在这个主题中，我使用了不同的面板：panel-primary、panel-panel-success、panel-info 和 panel-warning。

虽然主要面板清晰可见，但我发现其他类型的面板非常明亮且几乎不可见。

因此，我想通过保持相同的颜色（例如面板成功为绿色）来修改它们，但使它们与面板主面板一样可见。

例如，我尝试在 Cerulean 中复制/粘贴 Twitter Bootstrap 论文主题中的 .panel-success css，但没有任何成功。

有没有比 .panel 更高的地方可以修改？

谢谢。

编辑 1

我刚刚注意到我的亮度问题来自于我以错误的顺序添加样式表。这个订单的颜色很好：

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://bootswatch.com/cerulean/bootstrap.css">

但要留在原来的问题上：“如何修改面板颜色”这里是 css 和 html 代码。例如，我尝试使用红色的 .panel-success{} 对其进行修改但未成功，但我可能写错了。另外，wgat 会是只修改面板标题颜色的 css 吗？

    <!DOCTYPE html>
    <html lang="en">
    <head>

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://bootswatch.com/cerulean/bootstrap.css">

    </head>

    <style>
    .panel-success{

        background-color: red !important ;
    }
    </style>

    <body><br><br>

    <div class="container">
        <div class="panel panel-success">
            <div class="panel-heading">
               <h2 class="panel-title">Title</h2>
            </div>

            <div class="panel-body">
               <p>Paragraph</p>
            </div>
        </div>
    </div>


    </body>

【问题讨论】：

请创建当前问题的演示。

标签： css twitter-bootstrap panels

【解决方案1】：

.panel-success{
    // css you copied from paper theme and add !important
    background-color: green !important;
}

或者只是将此代码粘贴到您的自定义 css 中，它将覆盖 cerulean 主题中 .panel-success 的 css 代码。

【讨论】：

【解决方案2】：

这是@John Louie 答案的更详细版本。

.panel-success .panel-heading {
  background-color: blue !important;
}
.panel-success .panel-title {
  color: white;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Panel using default primary class -->
<div class="container">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h2 class="panel-title">Title</h2>
    </div>
    <div class="panel-body">
      <p>Paragraph</p>
    </div>
  </div>
</div>

<!-- Panel using overridden success class -->
<div class="container">
  <div class="panel panel-success">
    <div class="panel-heading">
      <h2 class="panel-title">Title</h2>
    </div>
    <div class="panel-body">
      <p>Paragraph</p>
    </div>
  </div>
</div>

【讨论】：

感谢详细介绍！这是完美的。感谢@John Louie 的第一个回答。