Twitter Bootstrap - 静态导航栏

Question

如何更改TB导航栏的背景颜色？查看http://twitter.github.com/bootstrap/index.html上的顶部导航栏。当我在navbar.navbar-inverse.navbar-fixed-top上设置background-color: pink;时，没有任何反应。我试图在其他元素上做同样的事情。我似乎无法改变颜色。

Answer 1

添加以下CSS和变化颜色。您需要更改：#222222（较深的颜色）和#111111（较浅的颜色），因为它们位于背景渐变的不同端。你需要改变它们。 更改#1b1b1b和#252525之间的东西。

.navbar-inverse .navbar-inner { 
    background-color: #1b1b1b; 
    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); 
} 

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

如果你不想梯度，只是做以下并更改#1b1b1b和#252525你的背景颜色分别边框颜色和#111111为“选择”的颜色。

.navbar-inverse .navbar-inner { 
    background-color: #1b1b1b; 
    background-image: none; 
    border-color: #252525; 
    filter: none; 
} 

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

Answer 2

我修改使用bootstrap.css后装入一个单独的样式表，其包括

.navbar { 
    background-color: #2a2a86; /* fallback color, place your own */ 

    /* Gradients for modern browsers, replace as you see fit */ 
    background-image: -moz-linear-gradient(top, #3a3a96, #2a2a86); 
    background-image: -ms-linear-gradient(top, #3a3a96, #2a2a86); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3a3a96), to(#2a2a86)); 
    background-image: -webkit-linear-gradient(top, #3a3a96, #2a2a86); 
    background-image: -o-linear-gradient(top, #3a3a96, #2a2a86); 
    background-image: linear-gradient(top, #3a3a96, #2a2a86); 
    background-repeat: repeat-x; 

    /* IE8-9 gradient filter */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3a3a96', endColorstr='#2a2a86', GradientType=0); 

}

然后可以应用相同的逻辑来按钮等等的NAV-栏。

对我来说似乎基色设定在基类的元素，所以

.navbar 
.btn 

等

Answer 3

尝试：

background-color: pink !important;