引导4导航栏颜色

Question

在Bootstrap 4中，如何更改导航栏的背景颜色？twbsColor的代码不起作用。我想让背景颜色变成不同的颜色，字体颜色变成白色。

<nav class="navbar navbar-toggleable-md navbar-light bg-danger">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Jordan Baron</a>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
            </li>
        </ul>
    </div>
</nav>

Answer 1

我得到了它。这很简单。使用类bg可以轻松实现这一点。

让我告诉你：

<nav class="navbar navbar-expand-lg navbar-dark navbar-full bg-primary"></nav>

这将为您提供默认的蓝色navbar

如果要更改喜爱的颜色，只需使用nav中的样式标记即可：

<nav class="navbar navbar-expand-lg navbar-dark navbar-full" style="background-color: #FF0000">

Answer 2

更新2021 -引导程序V5的工作

这里有一个更简单的方法来更改导航栏的背景色。

只需使用。导航栏变暗而不是。导航栏灯并添加自定义背景色类，如。bg公司红色

。导航栏变暗将使所有链接变白。

HTML

<nav class="navbar navbar-dark bg-company-red">

CSS风格...

.bg-company-red {
    background-color: darkred !important;
}

请参阅以下版本的留档链接：

• 引导v5 Navbar配色方案
• 引导v4 Navbar配色方案

Answer 3

引导程序5（更新2021）

就风格而言，导航栏在Bootstrap5中没有太大变化。因此，更改/覆盖颜色

/* change the background color */
.navbar-custom {
    background-color: #4433cc;
}

/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: #ffcc00;
}

/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: #ffbb00;
}

/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: pink;
}

如果有要自定义的导航栏下拉列表。。。

/* for dropdowns only */
.navbar-custom .navbar-nav .dropdown-menu {
    background-color: #ddaa11;
}

/* dropdown item text color */
.navbar-custom .navbar-nav .dropdown-item {
    color: #000000;
}

/* dropdown item hover or focus */
.navbar-custom .navbar-nav .dropdown-item:hover,
.navbar-custom .navbar-nav .dropdown-item:focus {
    color: #eeeeee;
    background-color: red;
}

引导程序4。x（2019年更新）

请记住，为了正确覆盖引导的CSS，您定义的任何CSS覆盖都必须具有相同或更高的CSS特异性。

默认情况下，导航栏是透明的。如果您只想更改背景色，只需将颜色应用到

这里的CSS，将改变任何相关的导航栏颜色在引导4。。。

/* change the background color */
.navbar-custom {
    background-color: #ff5500;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #ffffff;
}

演示：http://www.codeply.com/go/U9I2byZ3tS

覆盖导航栏亮或暗

如果您使用的是Bootstrap 4 Navbarnavbar-light或navbar-solar类，那么在重写中使用它。例如，更改Navbar链接颜色...

.navbar-light .nav-item.active .nav-link,
.navbar-light .nav-item:focus .nav-link,
.navbar-light .nav-item:hover .nav-link {
        color: #ffffff;
}

在进行任何自举自定义时，您需要了解CSS特殊性。自定义CSS中的重写需要使用与bootstrap.css.一样具体的选择器阅读更多

透明导航栏

请注意，引导4（和5）导航栏在默认情况下是透明的。使用navbar深色作为深色/粗体背景色，如果navbar颜色较浅，则使用navbar浅色。这将影响文本的颜色和切换图标的颜色，如下所述。

相关的：https://stackoverflow.com/a/18530995/171456