引導程序更改導航欄顏色

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/