Question

我应该编辑bootstrap.css文件的哪个参数来更改导航栏的颜色。

<nav class="navbar navbar-inverse" role="navigation">
  ...
</nav>

navbar-inverse给出了黑色，但我想要白色。我浏览了bootstrap.css并将属于navbar-inverse的所有属性颜色更改为#fff，但没有任何效果。

有任何线索吗？

Answer 1

自定义导航栏需要覆盖多个选择器。以下是您需要的大部分内容：

/* This of course assumes you're using .navbar-inverse */

/* Navbar main background */

.navbar.navbar-inverse {
    background-color: white;
}

/* Navbar title */

.navbar-inverse .navbar-brand {
    color: lightgray;
}

/* Focus/hover state for navbar title */

.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
    color: black;
}

/* Navbar links default color */

.navbar-inverse .navbar-nav > li > a {
    color: orange;
}

/* Navbar links hover/focus states */

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: pink;
}

/* Active link colors */

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


/* Mobile toggle button */

.navbar-inverse .navbar-toggle {
    border-color: lightgreen;
}

/* Mobile toggle button hover/focus states */

.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
    background-color: #DDD;
}

/* Mobile icon bar colors */

.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #CCC;
}

示例：http://jsfiddle.net/McHUc/6/

Bootstrap改变导航栏颜色

1 个答案: