Html 以较少的方式更改 twitter bootstrap 3.0 导航栏类背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18886309/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change twitter bootstrap 3.0 navbar class background color in less
提问by Henry
in html:
在 html 中：
<div class="navbar navbar-default">
in variable.less file:
在 variable.less 文件中：
@navbar-default-bg: #f8f8f8;
After change this hex colour to other colour(ie. blue), you will notice that only bottom edge colour change to blue. because the class navbar has background too, it block the @navbar-default-bg colour.
将此十六进制颜色更改为其他颜色（即蓝色）后，您会注意到只有底部边缘颜色更改为蓝色。因为类导航栏也有背景，它会阻止@navbar-default-bg 颜色。
Sample:
样本：
1.in html:
1.在html中：
<div class="navbar navbar-default">
in variable.less:
在 variable.less 中：
@navbar-default-bg: blue;
@navbar-default-bg：蓝色；
Output:
输出：
2.in html:
2.在html中：
<div class="navbar navbar-default">
in variable.less:
在 variable.less 中：
@navbar-default-bg: blue;
@navbar-default-bg：蓝色；
in custom.css:
在 custom.css 中：
.navbar{background: blue}
.navbar{背景：蓝色}
Output:
输出：
I know that if I make a custom css file and put .navbar{background: blue}it will change the navbar color to what I want.
我知道，如果我制作一个自定义的 css 文件并将其放入，.navbar{background: blue}它会将导航栏颜色更改为我想要的颜色。
But I prefer to edit less file. is there any way to do that? Try on your end first before you think this is a duplicate question!
但我更喜欢编辑较少的文件。有没有办法做到这一点？ 在您认为这是一个重复的问题之前，请先尝试一下！
回答by cyberbobcat
Try removing the default bootstrap-theme.css and bootstrap-theme.min.css files from your project as I think they over-ride some of the styles in the main bootstrap.css files.
尝试从项目中删除默认的 bootstrap-theme.css 和 bootstrap-theme.min.css 文件，因为我认为它们覆盖了主要 bootstrap.css 文件中的一些样式。
回答by Bass Jobsen
I think your question is duplicate still. I think your conclusion above is not right.
When i set @navbar-default-bg: blue;(in variables.less) and rebuild the css (Bootstrap). <div class="navbar navbar-default">will give me a blue navbar like:
我认为你的问题仍然是重复的。我认为你上面的结论是不正确的。当我设置 @navbar-default-bg: blue;(in variables.less) 并重建 css (Bootstrap) 时。<div class="navbar navbar-default">会给我一个蓝色的导航栏，如：
The .navbarclass don't set a background color neither it does influence the background color of your navbar-default class.
该.navbar班没有设置背景颜色既不它影响你的导航栏，默认类的背景颜色。
At the moment you will always have to add a second class to the .navbar (like navbar-default, navbar-inverse or navbar-custom) class for styling the navbar. See also: https://github.com/twbs/bootstrap/issues/10332
目前，您将始终必须向 .navbar（如 navbar-default、navbar-inverse 或 navbar-custom）类添加第二个类来设置导航栏的样式。另见：https: //github.com/twbs/bootstrap/issues/10332
After setting @navbar-default-bg: blue;and recompile bootstrap the css for .navbar-default will look like:
设置@navbar-default-bg: blue;并重新编译 bootstrap后，.navbar-default 的 css 将如下所示：
.navbar-default {
background-color: #0000ff;
border-color: #0000de;
}
.navbar-default .navbar-brand {
color: #777777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #5e5e5e;
background-color: transparent;
}
.navbar-default .navbar-text {
color: #777777;
}
.navbar-default .navbar-nav > li > a {
color: #777777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #333333;
background-color: transparent;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #555555;
background-color: #0000de;
}
.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
.navbar-default .navbar-toggle {
border-color: #dddddd;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #dddddd;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #cccccc;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #0000de;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #333333;
border-bottom-color: #333333;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #555555;
background-color: #0000de;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #555555;
border-bottom-color: #555555;
}
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #777777;
border-bottom-color: #777777;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #777777;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #333333;
background-color: transparent;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #555555;
background-color: #0000de;
}
.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
}
.navbar-default .navbar-link {
color: #777777;
}
.navbar-default .navbar-link:hover {
color: #333333;
}
Note bluewill be set to #0000FF;
注意blue将被设置为#0000FF;
