如何更改Twitter Bootstrap 2.0.2的导航栏的背景颜色?如何更改导航条的所有元素的颜色以反映背景颜色?
解决方法
您可以覆盖引导颜色,包括.navbar-inner类,通过在您自己的样式表中定位它,而不是修改bootstrap.css样式表,像这样:
.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,#222222); background-image: -webkit-gradient(linear,0 0,0 100%,from(#333333),to(#222222)); background-image: -webkit-linear-gradient(top,#222222); background-image: -o-linear-gradient(top,#222222); background-image: linear-gradient(top,#222222); background-repeat: repeat-x; /* IE8-9 gradient filter */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333',endColorstr='#222222',GradientType=0); }
你只需要修改所有这些样式,你自己的,他们会被拾起,像这样的东西,例如,我消除所有的梯度效果,只是设置一个坚实的黑色背景颜色:
.navbar-inner { background-color: #000; /* background color will be black for all browsers */ background-image: none; background-repeat: no-repeat; filter: none; }
您可以利用诸如Colorzilla Gradient Editor之类的工具,并为所有浏览器创建自己的渐变颜色,并用您自己的颜色替换原始颜色。
正如我在评论中提到的,我不建议你直接修改bootstrap.css样式表,因为所有的更改将丢失一旦样式表更新(当前版本是v2.0.2),所以最好是包括所有的您的更改在您自己的样式表内,与bootstrap.css样式表一起。但请记住覆盖所有适当的属性,以在浏览器之间保持一致性。