twitter-bootstrap 在 Twitter 的 Bootstrap 2.3.2 中更改导航栏颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17456010/
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
Changing navbar color in Twitter's Bootstrap 2.3.2
提问by user2547925
I've looked at other posts addressing this question, but I still can't seem to able to change the background color the navbar in Twitter Bootstrap. I'm using version 2.3.2. I did everything described by baptme in this post Change navbar color in twitter bootstrap 2.0.4. Here's the CSS I'm using to override the original bootstrap.css file.
我已经查看了解决这个问题的其他帖子，但我似乎仍然无法更改 Twitter Bootstrap 中导航栏的背景颜色。我使用的是 2.3.2 版。我做了 baptme 在这篇文章中描述的所有内容Change navbar color in twitter bootstrap 2.0.4。这是我用来覆盖原始 bootstrap.css 文件的 CSS。
.navbar-inner {
background: #eab92d; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhYjkyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNzk4MTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #eab92d 0%, #c79810 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eab92d), color-stop(100%,#c79810)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eab92d 0%,#c79810 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eab92d 0%,#c79810 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eab92d 0%,#c79810 100%); /* IE10+ */
background: linear-gradient(to bottom, #eab92d 0%,#c79810 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eab92d', endColorstr='#c79810',GradientType=0 ); /* IE6-8 */
}
.navbar-inner, .navbar .btn-navbar {
background: #eab92d; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhYjkyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNzk4MTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #eab92d 0%, #c79810 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eab92d), color-stop(100%,#c79810)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eab92d 0%,#c79810 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eab92d 0%,#c79810 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eab92d 0%,#c79810 100%); /* IE10+ */
background: linear-gradient(to bottom, #eab92d 0%,#c79810 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eab92d', endColorstr='#c79810',GradientType=0 ); /* IE6-8 */
}
.navbar .divider-vertical {
background-color: #c79810;
border-right: 1px solid #eab92d;
}
.navbar .nav .active > a, .navbar .nav .active > a:hover {
background-color: #c79810;
}
.navbar .nav > li > a {
color: #f9ed9d;
}
.navbar-fixed-top .brand {
color: #634c08;color: #f4dc87;
}
.navbar .nav > li > a:hover {color:white;}
.navbar .nav .active > a, .navbar .nav .active > a:hover {color:white;}
The only thing that changes when I run this is that the active "home" link has the #c79810 background color. Everything else still has the default black background color.
当我运行它时，唯一改变的是活动的“主页”链接具有#c79810 背景颜色。其他所有内容仍然具有默认的黑色背景色。
Also, I really don't care about having a gradient unless it's required. Just a solid background color is fine.
另外，除非需要，否则我真的不关心渐变。只需要纯色背景就可以了。
Any ideas as to what I'm doing wrong? Thanks!
关于我做错了什么的任何想法？谢谢！
回答by Bass Jobsen
(for Twitter's Bootstrap 3, see: Change navbar color in Twitter Bootstrap 3)
（对于 Twitter 的 Bootstrap 3，请参阅：更改 Twitter Bootstrap 3 中的导航栏颜色）
Don't forget the remove the gradient by setting background-image: none;
不要忘记通过设置删除渐变 background-image: none;
Example CSS code:(see: http://bootply.com/66394)
CSS 代码示例：（参见：http: //bootply.com/66394）
/* set the background-color to red */
.navbar-inner {
background-color: red;
/* remove the gradient */
background-image: none;
/* set font color to white */
color: white;
}
/* menu items */
/* set the background of the menu items to pink and default color to white */
.navbar .nav > li > a {
background-color: pink;
color: white;
}
/* set hover and focus to lightblue */
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
background-color: lightblue;
color: white;
}
/* set active item to darkgreen */
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
background-color: darkgreen;
color: white;
}
/* set font color and background of the project name (brand) */
.navbar .brand {
background-color: orange;
color: navy;
}
Add this code after bootstrap's CSS
在引导程序的 CSS 之后添加此代码
Using Less
少用
You could also consider to compile you own version. Try http://twitter.github.io/bootstrap/customize.html(which has a apart section for the navbar setting) or download your own copy from: https://github.com/twitter/bootstrap. You will find the navbar setting in variables.less. navbar.less is used to compile the navbar (depends on variables.less and mixins.less).
你也可以考虑编译你自己的版本。尝试http://twitter.github.io/bootstrap/customize.html（其中有一个单独的导航栏设置部分）或从以下位置下载您自己的副本：https://github.com/twitter/bootstrap。您将在 variables.less 中找到导航栏设置。navbar.less 用于编译导航栏（取决于 variables.less 和 mixins.less）。
Using the setting shown below will give you the same color changes as before but more stable and with gradients:
使用下面显示的设置将为您提供与以前相同的颜色变化，但更稳定且具有渐变：
// Navbar
// -------------------------
@navbarCollapseWidth: 979px;
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
@navbarHeight: 40px;
@navbarBackgroundHighlight: #FF0000; // red
@navbarBackground: darken(@navbarBackgroundHighlight, 5%);
@navbarBorder: darken(@navbarBackground, 12%);
@navbarText: #fff; //white
@navbarLinkColor: #fff;
@navbarLinkColorHover: #fff;
@navbarLinkColorActive: #fff;
@navbarLinkBackgroundHover: #ADD8E6; //lightblue
@navbarLinkBackgroundActive: #006400; //darkgreen
@navbarBrandColor: #000080; // navy
NOTE there is no variable to set the background color of the brand. To change this background color you will have to add something like:
注意没有变量可以设置品牌的背景颜色。要更改此背景颜色，您必须添加如下内容：
.navbar .brand {
background-color: #FFA500; // orange
}
回答by ByronVerreyne
You will need to overwrite it with some CSS. Make sure this loads below bootstrap css This will make the navbar brown
您将需要用一些 CSS 覆盖它。确保这在 bootstrap css 下加载这将使导航栏变成棕色
.navbar {
background-color: #442a13;
}
/* set the background-color to red */
.navbar-inner {
background-color: #442a13 !important;
background-image: -webkit-linear-gradient(top, #442a13 0%, #291306 100%)!important;
background-image: linear-gradient(to bottom, #442a13 0%, #291306 100%)!important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#442a13', endColorstr='#291306', GradientType=0)!important;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
color:#fff;
border: none;
}
.navbar-inverse .nav .active>a, .navbar-inverse .nav .active>a:hover, .navbar-inverse .nav .active>a:focus{
background-color: #291306;
color:#fff;
}
.dropdown-menu{
background-color: #371c09;
padding-left: 5px;
}
.navbar-inverse .brand, .navbar-inverse .nav>li>a{
color: #fff;
}
.navbar-inverse .nav .dropdown-header{
color:#ccc;
}
.navbar-inverse .nav li.dropdown.open>.dropdown-toggle, .navbar-inverse .nav li.dropdown.active>.dropdown-toggle, .navbar-inverse .nav li.dropdown.open.active>.dropdown-toggle{
background-color: #291306;
}
.nav-collapse .nav>li>a, .nav-collapse .dropdown-menu a{
color:#fff;
}
.nav-collapse .nav>li>a:hover, .nav-collapse .dropdown-menu a:hover{
background-color: #371c09 !important;
background-image: -webkit-linear-gradient(top, #371c09 0%, #291306 100%)!important;
background-image: linear-gradient(to bottom, #371c09 0%, #291306 100%)!important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#371c09', endColorstr='#291306', GradientType=0)!important;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
color:#fff;
}
.navbar-inverse .nav li.dropdown>.dropdown-toggle .caret {
border-top-color: #fff;
border-bottom-color: #fff;
}
.navbar .nav li.dropdown>.dropdown-toggle .caret{
border-top-color: #fff;
border-bottom-color: #fff;
}
.navbar-inverse .divider-vertical {
border-right-color: #371c09;
border-left-color: #291306;
}
