bootstrap-4 - Bootstrap 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

Bootstrap 5(2021 年更新)
在样式方面，Bootstrap 5 中的 Navbar 没有太大变化。因此，更改/覆盖颜色和样式与 Bootstrap 4 类似。要自定义支持的 Navbar 内容样式...

/* 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;
}

Bootstrap 4.x(2019 年更新)
请记住，您定义的任何 CSS 覆盖 必须具有相同的 CSS 特异性或更高的 才能正确覆盖 Bootstrap 的 CSS。
导航栏默认为 透明 。如果您只想更改背景颜色，只需将颜色应用于 <navbar class="bg-custom"> 即可，但请记住，这不会更改其他颜色，例如链接、悬停和下拉菜单颜色。
这是将更改 Bootstrap 4 中任何相关导航栏颜色的 CSS ...

/* 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 Navbar navbar-light 或 navbar-dark 类，则在覆盖中使用它。例如，更改导航栏链接颜色...

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

在进行任何 Bootstrap 自定义时，您需要了解 CSS 特异性 。自定义 CSS 中的覆盖需要使用与 bootstrap.css 一样具体的选择器。 Read more

透明导航栏
请注意，Bootstrap 4(和 5)导航栏默认为 透明 。将 navbar-dark 用于深色/粗体背景颜色，如果导航栏颜色较浅，则使用 navbar-light。这将影响文本和 color of the toggler icon as explained here 的颜色。
相关: https://stackoverflow.com/a/18530995/171456