Twitter Bootstrap 中的导航栏颜色 [英] navbar color in Twitter Bootstrap

问题描述

如何更改 Twitter Bootstrap 2.0.2 导航栏的背景颜色?如何更改导航栏所有元素的颜色以反映背景颜色?

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?

推荐答案

您可以覆盖引导程序颜色，包括 .navbar-inner 类，方法是将其定位在您自己的样式表中，而不是修改bootstrap.css 样式表，如下所示:

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;
}

您可以利用诸如 Colorzilla 渐变编辑器之类的工具来创建自己的渐变所有浏览器的颜色，并用您自己的颜色替换原始颜色.

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.

正如我在评论中提到的，我不建议您直接修改 bootstrap.css 样式表，因为一旦样式表更新，所有更改都将丢失(当前版本为 ^v2.0.2) 所以最好将所有更改包含在自己的样式表中，与 bootstrap.css 样式表一起.但请记住覆盖所有适当的属性以在浏览器之间保持一致性.

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.

这篇关于Twitter Bootstrap 中的导航栏颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！