我看了解其他帖子来解决这个问题,但我似乎无法改变Twitter Bootstrap中导航栏的背景颜色。我正在使用2.3.2版。我在这篇文章中Change navbar color in twitter bootstrap 2.0.4完成了baptme所描述的一切。这是我用来覆盖原始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;}
当我运行它时,唯一改变的是活动的“home”链接具有#c79810背景颜色。其他一切仍然具有默认的黑色背景颜色。
另外,除非需要,否则我真的不关心渐变。只有坚实的背景色才好。
关于我做错了什么的任何想法?谢谢!
答案 0 :(得分:11)
(对于Twitter的Bootstrap 3,请参阅:Change navbar color in Twitter Bootstrap 3)
不要忘记通过设置background-image: none;
示例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;
}
在bootstrap的CSS
之后添加此代码您也可以考虑编译自己的版本。尝试http://twitter.github.io/bootstrap/customize.html(导航栏设置有一个单独的部分)或从https://github.com/twitter/bootstrap下载您自己的副本。 您将在variables.less中找到导航栏设置。 navbar.less用于编译导航栏(取决于variables.less和mixins.less)。
使用下面显示的设置将为您提供与以前相同的颜色变化,但更稳定且具有渐变:
// 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
注意没有变量来设置品牌的背景颜色。要更改此背景颜色,您必须添加以下内容:
.navbar .brand {
background-color: #FFA500; // orange
}
答案 1 :(得分:0)
您需要使用一些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;
}