问题
How can I change the background color of the navbar of the Twitter Bootstrap 2.0.2? How can I change color of all the elements of the navbar to reflect the background color?
回答1:
You can overwrite the bootstrap colors, including the .navbar-inner class, by targetting it in your own stylesheet as opposed to modifying the bootstrap.css stylesheet, like so:
.navbar-inner {
background-color: #2c2c2c; /* fallback color, place your own */
/* Gradients for modern browsers, replace as you see fit */
background-image: -moz-linear-gradient(top, #333333, #222222);
background-image: -ms-linear-gradient(top, #333333, #222222);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
background-image: -webkit-linear-gradient(top, #333333, #222222);
background-image: -o-linear-gradient(top, #333333, #222222);
background-image: linear-gradient(top, #333333, #222222);
background-repeat: repeat-x;
/* IE8-9 gradient filter */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
}
You just have to modify all of those styles with your own and they will get picked up, like something like this for example, where i eliminate all gradient effects and just set a solid black background-color:
.navbar-inner {
background-color: #000; /* background color will be black for all browsers */
background-image: none;
background-repeat: no-repeat;
filter: none;
}
You can take advantage of such tools as the Colorzilla Gradient Editor and create your own gradient colors for all browsers and replace the original colors with your own.
And as i mentioned on the comments, i would not recommend you modifying the bootstrap.css stylesheet directly as all of your changes will be lost once the stylesheet gets updated (current version is v2.0.2) so it is preferred that you include all of your changes inside your own stylesheet, in tandem with the bootstrap.css stylesheet. But remember to overwrite all of the appropriate properties to have consistency across browsers.
回答2:
An excellent resource to see how to theme bootstrap is: bootswatch.com. It has nice examples and shows code as well. In short, they use lessc to recompile the bootstrap.css to your new color-theme.css. The nice thing of their approach is that is build on top of bootstrap, so when bootstrap is updated, you just recompile.
Links about using lessc and bootstrap:
- Using bootstrap with less
- Lessc.org
回答3:
If you havent got time to learn "less" or do it properly, here's a dirty hack...
Add this above where you render the bootstrap nav bar HTML - update the colours as required..
<style type="text/css">
.navbar-inner {
background-color: red;
background-image: linear-gradient(to bottom, blue, green);
background-repeat: repeat-x;
border: 1px solid yellow;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
min-height: 40px;
padding-left: 20px;
padding-right: 20px;
}
.dropdown-menu {
background-clip: padding-box;
background-color: red;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px 6px 6px 6px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
display: none;
float: left;
left: 0;
list-style: none outside none;
margin: 2px 0 0;
min-width: 160px;
padding: 5px 0;
position: absolute;
top: 100%;
z-index: 1000;
}
.btn-group.open .btn.dropdown-toggle {
background-color: red;
}
.btn-group.open .btn.dropdown-toggle {
background-color:lime;
}
.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
color:white;
background-color:Teal;
}
.navbar .nav > li > a {
color: white;
float: none;
padding: 10px 15px;
text-decoration: none;
text-shadow: 0 0px 0 #ffffff;
}
.navbar .brand {
display: block;
float: left;
padding: 10px 20px 10px;
margin-left: -20px;
font-size: 20px;
font-weight: 200;
color: white;
text-shadow: 0 0px 0 #ffffff;
}
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
color: white;
text-decoration: none;
background-color: transparent;
}
.navbar-text {
margin-bottom: 0;
line-height: 40px;
color: white;
}
.dropdown-menu li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 20px;
color: white;
white-space: nowrap;
}
.navbar-link {
color: white;
}
.navbar-link:hover {
color: white;
}
</style>
回答4:
You can download a custom version of bootstrap and set @navbarBackground to the color you want.
http://twitter.github.com/bootstrap/customize.html
回答5:
I'm using Bootstrap version 3.2.0 and it looks as though .navbar-inner doesn't exist any more.
The solutions here which suggest overriding .navbar-inner didn't work for me - the colour remained the same.
The colour only changed when I overrode .navbar as shown below:
.navbar {
background-color: #A4C8EC;
background-image: none;
}
回答6:
The best way currently to do the same would be to install LESS command line compiler using
$ npm install -g less jshint recess uglify-js
Once you have done this, then go to the less folder in the directory and then edit the file variables.less and you can change a lot of variables according to what you need including the color of the navigation bar
@navbarCollapseWidth: 979px;
@navbarHeight: 40px;
@navbarBackgroundHighlight: #ffffff;
@navbarBackground: darken(@navbarBackgroundHighlight, 5%);
@navbarBorder: darken(@navbarBackground, 12%);
@navbarText: #777;
@navbarLinkColor: #777;
@navbarLinkColorHover: @grayDark;
@navbarLinkColorActive: @gray;
@navbarLinkBackgroundHover: transparent;
@navbarLinkBackgroundActive: darken(@navbarBackground, 5%);
Once you have done this, go to your bootstrap directory and run the command make.
回答7:
If you are using LESS, you can use Mixins for less code. Here I will add a gradient, border, and border-radius:
.navbar-inner {
#gradient > .vertical(#ffffff, #ECECEC);
border: #E2E2E2;
.border-radius(6px);
}
*If you are using the rails gem, twitter-bootstrap-rails, I do this directly in the file bootstrap_and_overrides.css.less*
回答8:
that is what i do
.navbar-inverse .navbar-inner {
background-color: #E27403; /* it's flat*/
background-image: none;
}
.navbar-inverse .navbar-inner {
background-image: -ms-linear-gradient(top, #E27403, #E49037);
background-image: -webkit-linear-gradient(top, #E27403, #E49037);
background-image: linear-gradient(to bottom, #E27403, #E49037);
}
it works well for all navigator you can see demo here http://caverne.fr on the top
回答9:
In bootstrap.css line 4784 we see:
.navbar-inverse .navbar-inner {
background-color: #FFFFFFF;
background-image: -moz-linear-gradient(top, #222222, #111111);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
background-image: -webkit-linear-gradient(top, #222222, #111111);
background-image: -o-linear-gradient(top, #222222, #111111);
background-image: linear-gradient(to bottom, #222222, #111111);
background-repeat: repeat-x;
border-color: #252525;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
}
You need to remove all the 'background-image' property declarations to get the desired effect.
回答10:
Wouldn't occam's razor say to just do this until you need something more complex? It's a bit of a hack, but may suit the needs of someone that wants a quick fix.
.navbar-default .container-fluid{
background-color:#62ADD7; // Change the color
margin: -1px -1px 10px -1px; // Get rid of the border
}
回答11:
If you are using the LESS or SASS Version of the Bootstrap. The most efficient way is to change the variable name, in the LESS or SASS file.
$navbar-default-color: #FFFFFF !default;
$navbar-default-bg: #36669d !default;
$navbar-default-border: $navbar-default-bg !default;
This by far the most easiest and the most efficient way to change the Bootstraps Navbar. You need not write overrides, and the code remains clean.
回答12:
You can customize your own version on the Bootstrap official website.
回答13:
I actually just overwrite anything I want to change in the site.css, you should load the site.css after bootstrap so it will overwrite the classes. What I have done now is just made my own classes with my own little bootstrap theme. Little things like this
.navbar-nav li a{
color: #fff;
font-size: 15px;
margin-top: 9px;
}
.navbar-nav li a:hover{
background-color: #18678E;
height: 61px;
}
I also changed the likes of the validations errors the same way.
来源：https://stackoverflow.com/questions/9869610/navbar-color-in-twitter-bootstrap