Bootstrap 4导航栏颜色


Bootstrap 4 navbar color

在Bootstrap 4中，如何更改导航栏的背景颜色？ twbscolor的代码不起作用。 我想将背景色设为其他颜色并将字体颜色设为白色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>
        Jordan Baron

   
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                Home
           
</li>

       
</ul>

   
</nav>
相关讨论

更新2019

请记住，您定义的所有CSS覆盖都必须具有相同的CSS特异性或更高的CSS特异性，才能正确覆盖Bootstrap的CSS。

Bootstrap 4.1+

默认情况下，导航栏是透明的。如果只想更改背景颜色，可以简单地通过将颜色应用于来完成，但是请记住，它不会更改其他颜色，例如链接，悬停和下拉菜单颜色。

这是CSS，它将更改Bootstrap 4中所有相关的Navbar颜色...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 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-light或navbar-dark类，请在替代中使用它。例如，更改导航栏链接颜色...

1
2
3
4
5
.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-dark用于深色/粗体背景色，如果导航栏是较浅的颜色，则使用navbar-light。如此处所述，这将影响文本的颜色和切换器图标的颜色。

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

更新2019-Bootstrap v4.1 +

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

只需使用.navbar-dark而不是.navbar-light并添加您的自定义背景色类，例如.bg-company-red

.navbar-dark将使所有链接变为白色。

的HTML

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

CSS样式...

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

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

相关讨论

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

让我给你演示：

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

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

如果要更改自己喜欢的颜色，则只需使用nav中的样式标签：

1
<nav class="navbar navbar-expand-lg navbar-dark navbar-full" style="background-color: #FF0000">
相关讨论

您可以像这样在背景颜色属性值前面编写！important
它将更改链接的颜色。

1
2
3
.nav-link {
    color: white !important;
}
相关讨论

更改navbar背景颜色：

1
2
3
4
.navbar-custom {

    background-color: yourcolor !important;
}

如果您阅读bootstrap 4文档"配色方案"，它将回答您的问题。