引导程序更改导航栏颜色

Question

我应该编辑bootstrap.css文件的哪个参数以更改导航栏的颜色。

<nav class="navbar navbar-inverse" role="navigation"> 
    ... 
</nav> 

navbar-inverse给黑色，但我想要白色。我通过bootstrap.css并将所有属于navbar-inverse的属性颜色更改为#fff，但没有任何效果。

任何线索？

Answer 1

自定义导航栏需要覆盖多个选择器。下面是大多数你将需要：

/* This of course assumes you're using .navbar-inverse */ 

/* Navbar main background */ 

.navbar.navbar-inverse { 
    background-color: white; 
} 

/* Navbar title */ 

.navbar-inverse .navbar-brand { 
    color: lightgray; 
} 

/* Focus/hover state for navbar title */ 

.navbar-inverse .navbar-brand:hover, 
.navbar-inverse .navbar-brand:focus { 
    color: black; 
} 

/* Navbar links default color */ 

.navbar-inverse .navbar-nav > li > a { 
    color: orange; 
} 

/* Navbar links hover/focus states */ 

.navbar-inverse .navbar-nav > li > a:hover, 
.navbar-inverse .navbar-nav > li > a:focus { 
    color: pink; 
} 

/* Active link colors */ 

.navbar-inverse .navbar-nav > .active > a, 
.navbar-inverse .navbar-nav > .active > a:hover, 
.navbar-inverse .navbar-nav > .active > a:focus { 
    color: #555; 
    background-color: #E7E7E7; 
} 


/* Mobile toggle button */ 

.navbar-inverse .navbar-toggle { 
    border-color: lightgreen; 
} 

/* Mobile toggle button hover/focus states */ 

.navbar-inverse .navbar-toggle:hover, 
.navbar-inverse .navbar-toggle:focus { 
    background-color: #DDD; 
} 

/* Mobile icon bar colors */ 

.navbar-inverse .navbar-toggle .icon-bar { 
    background-color: #CCC; 
} 

例子：http://jsfiddle.net/McHUc/6/