css - Twitter Bootstrap - 静态导航栏

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“选定”颜色。

.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

ETC

Answer 3

尝试：

background-color: pink !important;