Question

我用 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>

Answer 1

如果在加载Bootstraps后加载规则，则可以简单地创建自己的样式以覆盖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

Answer 2

在引导程序中我们有预定义的类，这意味着我们无法更改其中的属性，我们必须按原样使用它们。您可以尝试在标记中更改它的样式属性。

像这样......

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

如何使用CSS样式属性更改默认的Bootstrap颜色？

2 个答案: