如何使用 CSS 样式属性更改默认引导颜色？答案

【问题标题】：How to change default Bootstrap color with CSS style property?如何使用 CSS 样式属性更改默认引导颜色？
【发布时间】：2018-04-15 07:01:22
【问题描述】：

我用 bootstrap 制作了这个导航栏，我想更改它的默认颜色（已经是黑色的其他颜色）。我怎么能用 CSS 样式属性做到这一点？？

<nav class="navbar navbar-inverse">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>                        
            </button>
          </div>
    </nav>

【问题讨论】：

不要覆盖引导默认类。添加您自己的并赋予他们新的风格。
在 SO 上，您应该尝试自己编写代码。在 doing more research 之后，如果您遇到问题，您可以发布您尝试过的内容，并清楚地解释什么不起作用并提供一个 Minimal, Complete, and Verifiable example.

标签： html css twitter-bootstrap-3

【解决方案1】：

兄弟，在引导程序中我们已经预定义了类，这意味着我们不能更改其中的属性，我们必须按原样使用它们。您可以尝试在标签中更改其样式属性。

这样的.....

.navbar-default { background-color: #F8F8F8; border-color: #E7E7E7; }

【讨论】：

您可以绝对覆盖 CSS 属性。

【解决方案2】：

如果在加载 Bootstrap 后加载规则，您可以简单地创建自己的样式来覆盖 Bootstraps。如果由于某种原因您必须首先加载，那么您的规则需要更高的特异性。 Bootstrap 的反向导航栏背景颜色规则是：

.navbar-inverse {
    background-color: #222;
    border-color: #080808;
}

所以你自己的规则喜欢并在 Bootstrap 的 CSS 之后加载它：

.navbar-inverse {
    background-color: red;
    border-color: #080808;
}

如果您必须在 Bootstrap 之前加载，请使用 body .navbar.navbar-inverse 之类的选择器来增加选择器的特异性

Bootply example

【讨论】：