Bootstrap 4导航栏颜色 [英] Bootstrap 4 navbar color

问题描述

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

In Bootstrap 4, how do I go about changing the background color of a navbar? The code from twbscolor doesn't work. I want to make the background color a different color and the font color white.

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

推荐答案

更新2019

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

Remember that whatever CSS overrides you define must be the same CSS specificity or greater in order to properly override Bootstrap's CSS.

Bootstrap 4.1 +

导航栏默认为透明.如果仅 想要更改背景颜色，只需将颜色应用于<navbar class="bg-custom">即可完成，但请记住，它不会更改其他颜色，例如链接，悬停和下拉菜单菜单颜色.

The Navbar is transparent by default. If you only want to change the background color, it can be done simply by applying the color to the <navbar class="bg-custom">, but remember that won't change the other colors such as the links, hover and dropdown menu colors.

这里的CSS会在Bootstrap 4中更改任何相关的Navbar颜色...

Here's CSS that will change any relevant Navbar colors in Bootstrap 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导航栏navbar-light或navbar-dark类，请在替代中使用它.例如，更改导航栏链接颜色...

If you're using the Bootstrap 4 Navbar navbar-light or navbar-dark classes, then use this in the overrides. For example, changing the Navbar link colors...

.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一样特定的选择器. 了解详情

---

When making any Bootstrap customizations, you need to understand CSS Specificity. Overrides in your custom CSS need to use selectors that are as specific as the bootstrap.css. Read more

透明导航栏

请注意，默认情况下，Bootstrap 4导航栏是透明的.将navbar-dark用于深色/粗体背景色，如果导航栏是较浅的颜色，则使用navbar-light.这将影响文本的颜色和切换开关图标的颜色，如下所述这里.

Notice that the Bootstrap 4 Navbar is transparent by default. Use navbar-dark for dark/bold background colors, and use navbar-light if the navbar is a lighter color. This will effect the color of the text and color of the toggler icon as explained here.

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

这篇关于Bootstrap 4导航栏颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！