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

更新2018年

请记住,为了正确覆盖Bootstrap的CSS,您定义的CSS覆盖必须具有相同的CSS特性或更高.

Bootstrap 4.1+

如果你只是想改变背景颜色,它可以简单地通过将颜色的做<navbar class="bg-custom">,但请记住,不会改变其他颜色,如链接,悬停和下拉菜单的颜色.

这里的CSS将改变Bootstrap 4中任何相关的Navbar颜色......

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

覆盖Navbar Light或Dark

如果您使用的是Bootstrap 4 Navbar navbar-light或navbar-dark类,请在覆盖中使用它.例如,更改Navbar链接颜色......

.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一样具体的选择器.阅读更多

透明导航栏

请注意,Bootstrap 4 Navbar默认是透明的.使用navbar-dark暗/大胆的背景颜色,并使用navbar-light如果导航栏是一个较浅的颜色.这将影响切换器图标的文本颜色和颜色,如此处所述.

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

Answer 2

更新2018 - Bootstrap v4.1 +

这是更简单的更改导航栏背景颜色的方法.

只需使用.navbar-dark而不是.navbar-light添加自定义背景颜色类.bg-company-red

.navbar-dark 将使您的所有链接变白.

HTML

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

CSS风格......

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

有关官方文档,请参阅http://getbootstrap.com/docs/4.1/components/navbar/#color-schemes.

Answer 3

我知道了。这很简单。使用该类，bg您可以轻松实现这一目标。

让我演示给你看：

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

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

如果你想改变你最喜欢的颜色，那么只需使用里面的 style 标签nav：

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