导航栏颜色在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屋！