Twitter引导深蓝色面板

我正在使用Twitter Bootstrap Cerulean模板。

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

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

因此，我想通过保持相同的颜色来修改它们(例如，panel-success为绿色)，但使它们与panel-primary一样可见。

例如，我试着从Twitter Bootstrap论文主题中复制/过去。panel-success css在Cerulean中，但没有任何成功。

是否有比。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{}修改它，但没有成功，但我可能写错了。此外，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>

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

或者直接将此代码粘贴到您的自定义css中，它将覆盖。panel-success in cerulean theme的css代码。

这是@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>

相关内容

最新更新

热门标签：