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>
</nav>
推荐答案
Bootstrap 5(2021 年更新)
就样式而言，Bootstrap 5 中的导航栏没有太大变化.因此，更改/覆盖颜色 &样式类似于 Bootstrap 4.要自定义支持的导航栏内容样式...
/* 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;
}
If there are Navbar dropdowns you want to customize...如果您想自定义导航栏下拉菜单...
/* 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 (update 2019)
<小时>
Bootstrap 4.x(2019 年更新)
请记住，您定义的任何 CSS 覆盖必须具有相同或更高的 CSS 特异性，以便正确覆盖 Bootstrap 的 CSS.
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.
导航栏默认透明.如果您只想更改背景颜色，只需将颜色应用到
Here's CSS that will change any relevant Navbar colors in Bootstrap 4...
这是将在 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;
}
Demo: http://www.codeply.com/go/U9I2byZ3tS演示:http://www.codeply.com/go/U9I2byZ3tS><小时>
覆盖导航栏浅色或深色
如果您使用 Bootstrap 4 Navbar 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(和 5)导航栏默认是透明的.使用 navbar-dark 表示深色/粗体背景颜色，如果导航栏颜色较浅，则使用 navbar-light.这将影响文本的颜色和 如解释的切换器图标的颜色这里.
Notice that the Bootstrap 4 (and 5) 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屋！
