Twitter bootstrap 天蓝色面板

Question

我正在使用 Twitter Bootstrap Cerulean 模板。

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

虽然panel-primary清晰可见，但我发现其他类型的面板非常明亮，几乎看不到。

因此我想通过保持相同的颜色（例如 panel-success 的绿色）来修改它们，但使它们与 panel-primary.

一样可见

例如，我尝试 copy/past 来自 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">

但要继续讨论原来的问题：'how to modify the panel color' 这里是 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>

Answer 1

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

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

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

Twitter bootstrap 天蓝色面板

Twitter bootstrap cerulean color panels

css

panels

twitter-bootstrap