Question

如何更改TB导航栏的背景颜色？请查看http://twitter.github.com/bootstrap/index.html上的顶部导航栏。当我在background-color: pink;上设置navbar.navbar-inverse.navbar-fixed-top时，没有任何反应。我尝试在其他元素上做同样的事情。我似乎无法改变颜色。

Answer 1

添加以下CSS并更改颜色。您需要更改：#222222（较暗的颜色）和#111111（较浅的颜色），因为它们位于背景渐变的不同端。你需要改变它们。将#1b1b1b和#252525更改为两者之间的内容。

.navbar-inverse .navbar-inner {
    background-color: #1b1b1b;
    background-image: -moz-linear-gradient(top, #222222, #111111);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
    background-image: -webkit-linear-gradient(top, #222222, #111111);
    background-image: -o-linear-gradient(top, #222222, #111111);
    background-image: linear-gradient(to bottom, #222222, #111111);
    background-repeat: repeat-x;
    border-color: #252525;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
}

.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus {
    color: #ffffff;
    background-color: #111111;
}

如果您不想要渐变，只需执行以下操作并将#1b1b1b和#252525分别更改为背景颜色和边框颜色，并将#111111更改为“选定”颜色。< / p>

.navbar-inverse .navbar-inner {
    background-color: #1b1b1b;
    background-image: none;
    border-color: #252525;
    filter: none;
}

.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus {
    color: #ffffff;
    background-color: #111111;
}

Answer 2

我使用bootstrap.css后加载的单独样式表更改了导航栏，其中包含

.navbar {
  background-color: #2a2a86; /* fallback color, place your own */

  /* Gradients for modern browsers, replace as you see fit */
  background-image: -moz-linear-gradient(top, #3a3a96, #2a2a86);
  background-image: -ms-linear-gradient(top, #3a3a96, #2a2a86);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3a3a96), to(#2a2a86));
  background-image: -webkit-linear-gradient(top, #3a3a96, #2a2a86);
  background-image: -o-linear-gradient(top, #3a3a96, #2a2a86);
  background-image: linear-gradient(top, #3a3a96, #2a2a86);
  background-repeat: repeat-x;

  /* IE8-9 gradient filter */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3a3a96', endColorstr='#2a2a86', GradientType=0);

}

然后，您可以将相同的逻辑应用于按钮等等。

对我来说，基本颜色似乎是在元素的基类中设置的，所以

.navbar
.btn

等

Answer 3

尝试：

background-color: pink !important;

Twitter Bootstrap - 静态导航栏

3 个答案: