colors - Twitter Bootstrap 中的导航栏颜色

Question

如何更改 Twitter Bootstrap 2.0.2 导航栏的背景颜色？如何更改导航栏所有元素的颜色以反射(reflect)背景颜色？

Answer 1

您可以通过在自己的样式表中定位 Bootstrap 颜色(包括 .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, #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);
}

您只需用自己的样式修改所有这些样式，它们就会被拾取，例如，我消除了所有渐变效果并仅设置纯黑色背景颜色:

.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 样式表一起。但请记住覆盖所有适当的属性，以确保跨浏览器的一致性。