【问题标题】：Changing navbar color in Twitter's Bootstrap 2.3.2在 Twitter 的 Bootstrap 2.3.2 中更改导航栏颜色
【发布时间】：2013-07-01 14:47:39
【问题描述】：

我查看了解决此问题的其他帖子，但我似乎仍然无法更改 Twitter Bootstrap 中导航栏的背景颜色。我使用的是 2.3.2 版。我做了 baptme 在这篇帖子 Change navbar color in twitter bootstrap 2.0.4 中描述的所有事情。这是我用来覆盖原始 bootstrap.css 文件的 CSS。

.navbar-inner {
  background: #eab92d; /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhYjkyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNzk4MTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  #eab92d 0%, #c79810 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eab92d), color-stop(100%,#c79810)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #eab92d 0%,#c79810 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eab92d', endColorstr='#c79810',GradientType=0 ); /* IE6-8 */
  }

    .navbar-inner, .navbar .btn-navbar {
    background: #eab92d; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhYjkyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNzk4MTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #eab92d 0%, #c79810 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eab92d), color-stop(100%,#c79810)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #eab92d 0%,#c79810 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eab92d', endColorstr='#c79810',GradientType=0 ); /* IE6-8 */
    }

  .navbar .divider-vertical {
    background-color: #c79810;
    border-right: 1px solid #eab92d;
    }

  .navbar .nav .active > a, .navbar .nav .active > a:hover {
    background-color: #c79810;
    }

  .navbar .nav > li > a {
    color: #f9ed9d;
    }

.navbar-fixed-top .brand {
  color: #634c08;color: #f4dc87;
  }

  .navbar .nav > li > a:hover {color:white;}

  .navbar .nav .active > a, .navbar .nav .active > a:hover {color:white;}

当我运行它时唯一改变的是活动的“主页”链接具有#c79810 背景颜色。其他所有内容仍然具有默认的黑色背景颜色。

另外，除非需要，否则我真的不关心渐变。纯色背景就可以了。

关于我做错了什么有什么想法吗？谢谢！

【问题讨论】：

标签： twitter-bootstrap background-color navbar

【解决方案1】：

（对于 Twitter 的 Bootstrap 3，请参阅：Change navbar color in Twitter Bootstrap 3）

不要忘记通过设置background-image: none;来移除渐变

示例 CSS 代码：（参见：http://bootply.com/66394）

/* set the background-color to red */
.navbar-inner {
  background-color: red;
  /* remove the gradient */
  background-image: none;
  /* set font color to white */
  color: white;
}   

/* menu items */

/* set the background of the menu items to pink and default color to white */
.navbar .nav > li > a {
  background-color: pink;
  color: white;
}

/* set hover and focus to lightblue */
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
  background-color: lightblue;
  color: white;
}

/* set active item to darkgreen */
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
  background-color: darkgreen;
  color: white;
}

/* set font color and background of the project name (brand) */
.navbar .brand {
  background-color: orange;
  color: navy;
}

在 bootstrap 的 CSS 之后添加这段代码

少用

你也可以考虑编译你自己的版本。试试http://twitter.github.io/bootstrap/customize.html（它有一个单独的导航栏设置部分）或从https://github.com/twitter/bootstrap下载您自己的副本。您将在 variables.less 中找到导航栏设置。 navbar.less 用于编译导航栏（取决于 variables.less 和 mixins.less）。

使用下面显示的设置将获得与以前相同的颜色变化，但更稳定并带有渐变：

// Navbar
// -------------------------
@navbarCollapseWidth:             979px;
@navbarCollapseDesktopWidth:      @navbarCollapseWidth + 1;

@navbarHeight:                    40px;
@navbarBackgroundHighlight:       #FF0000; // red
@navbarBackground:                darken(@navbarBackgroundHighlight, 5%);
@navbarBorder:                    darken(@navbarBackground, 12%);

@navbarText:                      #fff; //white
@navbarLinkColor:                 #fff;
@navbarLinkColorHover:            #fff; 
@navbarLinkColorActive:           #fff;
@navbarLinkBackgroundHover:       #ADD8E6; //lightblue
@navbarLinkBackgroundActive:      #006400; //darkgreen

@navbarBrandColor:                #000080; // navy

注意没有变量可以设置品牌的背景颜色。要更改此背景颜色，您必须添加以下内容：

.navbar .brand {
  background-color: #FFA500; // orange
}

见：http://bootply.com/66399

【讨论】：

【解决方案2】：

您需要用一些 CSS 覆盖它。确保在引导 css 下加载这将使导航栏变成棕色

.navbar {
    background-color: #442a13; 
}

/* set the background-color to red */
.navbar-inner {
  background-color: #442a13 !important;
  background-image: -webkit-linear-gradient(top, #442a13 0%, #291306 100%)!important;
  background-image:         linear-gradient(to bottom, #442a13 0%, #291306 100%)!important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#442a13', endColorstr='#291306', GradientType=0)!important;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  background-repeat: repeat-x;
  color:#fff; 
  border: none;

}

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

.dropdown-menu{
    background-color: #371c09;
    padding-left: 5px;
}

.navbar-inverse .brand, .navbar-inverse .nav>li>a{
    color: #fff;
}

.navbar-inverse .nav .dropdown-header{
    color:#ccc;
}

.navbar-inverse .nav li.dropdown.open>.dropdown-toggle, .navbar-inverse .nav li.dropdown.active>.dropdown-toggle, .navbar-inverse .nav li.dropdown.open.active>.dropdown-toggle{
    background-color: #291306;
}

.nav-collapse .nav>li>a, .nav-collapse .dropdown-menu a{
    color:#fff;
}

.nav-collapse .nav>li>a:hover, .nav-collapse .dropdown-menu a:hover{
    background-color: #371c09 !important;

  background-image: -webkit-linear-gradient(top, #371c09 0%, #291306 100%)!important;
  background-image:         linear-gradient(to bottom, #371c09 0%, #291306 100%)!important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#371c09', endColorstr='#291306', GradientType=0)!important;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  background-repeat: repeat-x;
  color:#fff; 
}

.navbar-inverse .nav li.dropdown>.dropdown-toggle .caret {
border-top-color: #fff;
border-bottom-color: #fff;
}

.navbar .nav li.dropdown>.dropdown-toggle .caret{
border-top-color: #fff;
border-bottom-color: #fff;
}

.navbar-inverse .divider-vertical {
border-right-color: #371c09;
border-left-color: #291306;
}

【讨论】：