颜色 – navbar颜色在Twitter Bootstrap

前端之家收集整理的这篇文章主要介绍了颜色 – navbar颜色在Twitter Bootstrap前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何更改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样式表一起。但请记住覆盖所有适当的属性,以在浏览器之间保持一致性。

猜你在找的Bootstrap相关文章