在 Twitter Bootstrap 中更改导航栏颜色

Question

我将如何修改 CSS 以更改 Twitter Bootstrap 中导航栏的颜色？

Answer 1

tl;dr - TWBSColor - Generate your own Bootstrap navbar tl;dr - TWBSColor - 生成你自己的 Bootstrap 导航栏

Version notes: - Online tool: Bootstrap 3.3.2+ / 4.0.0+ - This answer: Bootstrap 3.0.x版本说明： - 在线工具：Bootstrap 3.3.2+ / 4.0.0+ - 这个答案：Bootstrap 3.0.x

Available navbars可用的导航栏

You've got two basic navbars:你有两个基本的导航栏：

<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>

Default color usage默认颜色使用

Here are the main colors and their usage:以下是主要颜色及其用法：

#F8F8F8 : navbar background #F8F8F8 : 导航栏背景
#E7E7E7 : navbar border #E7E7E7 : 导航栏边框
#777 : default color #777 ：默认颜色
#333 : hover color ( #5E5E5E for .nav-brand ) #333 ：悬停颜色（ #5E5E5E用于.nav-brand ）
#555 : active color #555 ：活动颜色
#D5D5D5 : active background #D5D5D5 ：活动背景

Default style默认样式

If you want to put some custom style, here's the CSS you need to change:如果您想放置一些自定义样式，这里是您需要更改的 CSS：

/* navbar */
.navbar-default {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}
/* Title */
.navbar-default .navbar-brand {
    color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #5E5E5E;
}
/* Link */
.navbar-default .navbar-nav > li > a {
    color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #333;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #555;
    background-color: #D5D5D5;
}
/* Caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #777;
    border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #333;
    border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #555;
    border-bottom-color: #555;
}
/* Mobile version */
.navbar-default .navbar-toggle {
    border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #CCC;
}
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #777;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
          color: #333;
    }
}

Custom colored navbar examples自定义彩色导航栏示例

Here are four examples of a custom colored navbar:以下是自定义彩色导航栏的四个示例：

在此处输入图片说明

And the SCSS code:和 SCSS 代码：

$bgDefault   : #e74c3c;
$bgHighlight : #c0392b;
$colDefault  : #ecf0f1;
$colHighlight: #ffbbbc;
.navbar-default {
  background-color: $bgDefault;
  border-color: $bgHighlight;
  .navbar-brand {
    color: $colDefault;
    &:hover, &:focus {
      color: $colHighlight; }}
  .navbar-text {
    color: $colDefault; }
  .navbar-nav {
    > li {
      > a {
        color: $colDefault;
        &:hover,  &:focus {
          color: $colHighlight; }}}
    > .active {
      > a, > a:hover, > a:focus {
        color: $colHighlight;
        background-color: $bgHighlight; }}
    > .open {
      > a, > a:hover, > a:focus {
        color: $colHighlight;
        background-color: $bgHighlight; }}}
  .navbar-toggle {
    border-color: $bgHighlight;
    &:hover, &:focus {
      background-color: $bgHighlight; }
    .icon-bar {
      background-color: $colDefault; }}
  .navbar-collapse,
  .navbar-form {
    border-color: $colDefault; }
  .navbar-link {
    color: $colDefault;
    &:hover {
      color: $colHighlight; }}}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu {
    > li > a {
      color: $colDefault;
      &:hover, &:focus {
        color: $colHighlight; }}
    > .active {
      > a, > a:hover, > a:focus, {
        color: $colHighlight;
        background-color: $bgHighlight; }}}
}

And finally, a little gift最后，一份小礼物

I've just made a script which will allow you to generate your theme: TWBSColor - Generate your own Bootstrap navbar我刚刚制作了一个允许您生成主题的脚本： TWBSColor - Generate your own Bootstrap navbar

[Update]: TWBSColor now generates SCSS/SASS/ Less /CSS code. [更新]：TWBSColor 现在生成 SCSS/SASS/ Less /CSS 代码。
[Update]: From now, you can use Less as the default language provided by TWBSColor [更新]：从现在起，TWBSColor 提供的默认语言可以使用 Less
[Update]: TWBSColor now supports drop down menus colorization [更新]：TWBSColor 现在支持下拉菜单着色
[Update]: TWBSColor now allows to choose your version (Bootstrap 4 support added) [更新]：TWBSColor 现在允许选择您的版本（添加了 Bootstrap 4 支持）

Answer 2

Bootstrap 5 (update 2021) Bootstrap 5（2021 年更新）

By default, the Navbar is transparent in Bootstrap 5. Not much has changed since Bootstrap 4 for changing the Navbar background color, text color, links, dropdown and hover styles..默认情况下，导航栏在 Bootstrap 5 中是透明的。自 Bootstrap 4 以来，在更改导航栏背景颜色、文本颜色、链接、下拉和悬停样式方面没有太大变化。

/* change the background color */
.navbar-custom {
    background-color: #4433cc;
}

/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: #ffcc00;
}

/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: #ffbb00;
}

/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: pink;
}

/* for dropdowns only */
.navbar-custom .navbar-nav .dropdown-menu {
    background-color: #ddaa11;
}

/* dropdown item text color */
.navbar-custom .navbar-nav .dropdown-item {
    color: #000000;
}

/* dropdown item hover or focus */
.navbar-custom .navbar-nav .dropdown-item:hover,
.navbar-custom .navbar-nav .dropdown-item:focus {
    color: #eeeeee;
    background-color: red;
}

Bootstrap 5 custom navbar color demo Bootstrap 5 自定义导航栏颜色演示

Bootstrap 4.3 (update 2020) Bootstrap 4.3（2020 年更新）

Changing the Navbar color is different (and a little easier) in Bootstrap 4 .在Bootstrap 4 中更改导航栏颜色是不同的（并且更容易一些）。 You can create a custom navbar class, and then reference it to change the navbar without impacting other Bootstrap navs..您可以创建自定义导航栏类，然后引用它来更改导航栏，而不会影响其他 Bootstrap 导航。

<nav class="navbar navbar-custom">...</nav>

Bootstrap 4.3+引导程序 4.3+

The CSS required to change the Navbar is much less in Bootstrap 4...在 Bootstrap 4 中，更改导航栏所需的 CSS 少得多......

.navbar-custom {
    background-color: #ff5500;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #ffffff;
}

Bootstrap 4 Custom Navbar Demo Bootstrap 4 自定义导航栏演示

Changing the active/hover link background color also works with the same CSS, but you must adjust the padding if you want the bg color to fill the full height of the link...更改活动/悬停链接背景颜色也适用于相同的 CSS，但如果您希望 bg 颜色填充链接的整个高度，则必须调整填充...

py-0 to remove vertical padding from the entire navbar... py-0从整个导航栏中删除垂直填充...

<nav class="navbar navbar-expand-sm navbar-custom py-0">..</nav>

/* change the link color and padding  */
.navbar-custom .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
    padding: .75rem 1rem;
}

/* change the color and background color of active links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #ffffff;
    background-color: #333;
}

Bootstrap 4 Change Link and Background Color Demo Bootstrap 4 更改链接和背景颜色演示

Also see: How can I change the Bootstrap 4 navbar button icon color?另请参阅：如何更改 Bootstrap 4 导航栏按钮图标颜色？

**Bootstrap 3** **引导程序 3**

 <nav class="navbar navbar-custom"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">... </button> <a class="navbar-brand" href="#">Title</a> </div> ... </nav> .navbar-custom { background-color:#229922; color:#ffffff; border-radius:0; } .navbar-custom .navbar-nav > li > a { color:#fff; } .navbar-custom .navbar-nav > .active > a { color: #ffffff; background-color:transparent; } .navbar-custom .navbar-nav > li > a:hover, .navbar-custom .navbar-nav > li > a:focus, .navbar-custom .navbar-nav > .active > a:hover, .navbar-custom .navbar-nav > .active > a:focus, .navbar-custom .navbar-nav > .open >a { text-decoration: none; background-color: #33aa33; } .navbar-custom .navbar-brand { color:#eeeeee; } .navbar-custom .navbar-toggle { background-color:#eeeeee; } .navbar-custom .icon-bar { background-color:#33aa33; }

Custom Navbar Demo on Bootply Bootply 上的自定义导航栏演示

If the Navbar has dropdowns, add the following to change dropdown color(s):如果导航栏有下拉菜单，请添加以下内容以更改下拉颜色：

 /* for dropdowns only */ .navbar-custom .navbar-nav .dropdown-menu { background-color: #33aa33; } .navbar-custom .navbar-nav .dropdown-menu>li>a { color: #fff; } .navbar-custom .navbar-nav .dropdown-menu>li>a:hover,.navbar-custom .navbar-nav .dropdown-menu>li>a:focus { color: #33aa33; }

Demo with Dropdown带有下拉菜单的演示

If you want to change the theme colors all together (beyond the navbar), see this answer如果您想一起更改主题颜色（超出导航栏），请参阅此答案

Answer 3

It took me a while, but I discovered that including the following was what made it possible to change the navbar color:我花了一段时间，但我发现包括以下内容可以更改导航栏颜色：

.navbar{ 
    background-image: none;
}

Answer 4

Using Less少用

You could also consider to compile your own version.您也可以考虑编译自己的版本。 Try http://getbootstrap.com/customize/ (which has a apart section for the Navbars settings (Default navbar and Inverted Navbar)) or download your own copy from https://github.com/twbs/bootstrap .尝试http://getbootstrap.com/customize/ （其中有一个单独的部分用于导航栏设置（默认导航栏和反向导航栏））或从https://github.com/twbs/bootstrap下载您自己的副本。

You will find the navbar settings in variables.less .您将在variables.less找到导航栏设置。 navbar.less is used to compile the navbar (depends on variables.less and mixins.less ). navbar.less用于编译导航栏（取决于variables.less和mixins.less ）。

Copy the 'navbar-default section' and fill in your own color settings.复制“导航栏默认部分”并填写您自己的颜色设置。 Changing the variables in variables.less will be the easiest way (changing the default or inverse navbar won't be a problem because you have one navbar per page only).更改 variables.less 中的variables.less将是最简单的方法（更改默认或反向导航栏不会有问题，因为每页只有一个导航栏）。

You won't change all settings in most cases:在大多数情况下，您不会更改所有设置：

// Navbar
// -------------------------

// Basics of a navbar
@navbar-height:                    50px;
@navbar-margin-bottom:             @line-height-computed;
@navbar-default-color:             #777;
@navbar-default-bg:                #f8f8f8;
@navbar-default-border:            darken(@navbar-default-bg, 6.5%);
@navbar-border-radius:             @border-radius-base;
@navbar-padding-horizontal:        floor(@grid-gutter-width / 2);
@navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);

// Navbar links
@navbar-default-link-color:                #777;
@navbar-default-link-hover-color:          #333;
@navbar-default-link-hover-bg:             transparent;
@navbar-default-link-active-color:         #555;
@navbar-default-link-active-bg:            darken(@navbar-default-bg, 6.5%);
@navbar-default-link-disabled-color:       #ccc;
@navbar-default-link-disabled-bg:          transparent;

// Navbar brand label
@navbar-default-brand-color:               @navbar-default-link-color;
@navbar-default-brand-hover-color:         darken(@navbar-default-link-color, 10%);
@navbar-default-brand-hover-bg:            transparent;

// Navbar toggle
@navbar-default-toggle-hover-bg:           #ddd;
@navbar-default-toggle-icon-bar-bg:        #ccc;
@navbar-default-toggle-border-color:       #ddd;

You could also try http://twitterbootstrap3navbars.w3masters.nl/ .您也可以尝试http://twitterbootstrap3navbars.w3masters.nl/ 。 This tool generates CSS code for your custom navbar.此工具为您的自定义导航栏生成 CSS 代码。 Optionally, you could also add gradient colors and borders to the navbar.或者，您还可以向导航栏添加渐变颜色和边框。

Answer 5

Just add an id to the HTML navbar, such as:只需在 HTML 导航栏中添加一个 id，例如：

<nav id="navbar-yellow" class="navbar navbar-default navbar-fixed-top" role="navigation">

With this id you can style the navbar color, but also the links and dropdowns使用此 ID，您可以设置导航栏颜色的样式，还可以设置链接和下拉菜单

Examples applied to different types of navbars适用于不同类型导航栏的示例

Black黑色的

Yellow黄色

Darkblue深蓝

Red (Cherry)红樱桃）

Darkgreen深绿色

Here is the CSS这是CSS

/*
 * Black navbar style
 */
#navbar-black.navbar-default { /* #3C3C3C - #222222 */
    font-size: 14px;
    background-color: rgba(34, 34, 34, 1);
    background: -webkit-linear-gradient(top, rgba(60, 60, 60, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: linear-gradient(to bottom, rgba(60, 60, 60, 1) 0%, rgba(34, 34, 34, 1) 100%);
    border: 0px;
    border-radius: 0;
}
#navbar-black.navbar-default .navbar-nav>li>a:hover,
#navbar-black.navbar-default .navbar-nav>li>a:focus,
#navbar-black.navbar-default .navbar-nav>li>ul>li>a:hover,
#navbar-black.navbar-default .navbar-nav>li>ul>li>a:focus,
#navbar-black.navbar-default .navbar-nav>.active>a,
#navbar-black.navbar-default .navbar-nav>.active>a:hover,
#navbar-black.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(0, 0, 0, 1);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
}
#sidebar-black, #column-black {
      background-color: #222222;
}
#navbar-black.navbar-default .navbar-toggle {
    border-color: #222222;
}
#navbar-black.navbar-default .navbar-toggle:hover,
#navbar-black.navbar-default .navbar-toggle:focus {
    background-color: #3C3C3C;
}
#navbar-black.navbar-default .navbar-nav>li>a,
#navbar-black.navbar-default .navbar-nav>li>ul>li>a,
#navbar-black.navbar-default .navbar-brand {
    color: #999999;
}
#navbar-black.navbar-default .navbar-toggle .icon-bar,
#navbar-black.navbar-default .navbar-toggle:hover .icon-bar,
#navbar-black.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #ffffff;
}

/*
 * Red navbar style
 */
#navbar-red.navbar-default { /* #990033 - #cc0033 */
    font-size: 14px;
    background-color: rgba(153, 0, 51, 1);
    background: -webkit-linear-gradient(top, rgba(204, 0, 51, 1) 0%, rgba(153, 0, 51, 1) 100%);
    background: linear-gradient(to bottom, rgba(204, 0, 51, 1) 0%, rgba(153, 0, 51, 1) 100%);
    border: 0px;
    border-radius: 0;
}
#navbar-red.navbar-default .navbar-nav>li>a:hover,
#navbar-red.navbar-default .navbar-nav>li>a:focus,
#navbar-red.navbar-default .navbar-nav>li>ul>li>a:hover,
#navbar-red.navbar-default .navbar-nav>li>ul>li>a:focus,
#navbar-red.navbar-default .navbar-nav>.active>a,
#navbar-red.navbar-default .navbar-nav>.active>a:hover,
#navbar-red.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(51, 51, 51, 1);
    background-color: rgba(255, 255, 255, 1);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
#sidebar-red, #column-red {
      background-color: #990033;
}
#navbar-red.navbar-default .navbar-toggle {
    border-color: #990033;
}
#navbar-red.navbar-default .navbar-toggle:hover,
#navbar-red.navbar-default .navbar-toggle:focus {
    background-color: #cc0033;
}
#navbar-red.navbar-default .navbar-nav>li>a,
#navbar-red.navbar-default .navbar-nav>li>ul>li>a,
#navbar-red.navbar-default .navbar-brand {
    color: #999999;
}
#navbar-red.navbar-default .navbar-toggle .icon-bar,
#navbar-red.navbar-default .navbar-toggle:hover .icon-bar,
#navbar-red.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #ffffff;
}

/*
 * Darkblue navbar style
 */
#navbar-darkblue.navbar-default { /* #003399 - #0033cc */
    font-size: 14px;
    background-color: rgba(51, 51, 153, 1);
    background: -webkit-linear-gradient(top, rgba(51, 51, 204, 1) 0%, rgba(51, 51, 153, 1) 100%);
    background: linear-gradient(to bottom, rgba(51, 51, 204, 1) 0%, rgba(51, 51, 153, 1) 100%);
    border: 0px;
    border-radius: 0;
}
#navbar-darkblue.navbar-default .navbar-nav>li>a:hover,
#navbar-darkblue.navbar-default .navbar-nav>li>a:focus,
#navbar-darkblue.navbar-default .navbar-nav>li>ul>li>a:hover,
#navbar-darkblue.navbar-default .navbar-nav>li>ul>li>a:focus,
#navbar-darkblue.navbar-default .navbar-nav>.active>a,
#navbar-darkblue.navbar-default .navbar-nav>.active>a:hover,
#navbar-darkblue.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(51, 51, 51, 1);
    background-color: rgba(255, 255, 255, 1);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
#sidebar-darkblue, #column-darkblue {
    background-color: #333399;
}
#navbar-darkblue.navbar-default .navbar-toggle {
    border-color: #333399;
}
#navbar-darkblue.navbar-default .navbar-toggle:hover,
#navbar-darkblue.navbar-default .navbar-toggle:focus {
    background-color: #3333cc;
}
#navbar-darkblue.navbar-default .navbar-nav>li>a,
#navbar-darkblue.navbar-default .navbar-nav>li>ul>li>a,
#navbar-darkblue.navbar-default .navbar-brand {
    color: #999999;
}
#navbar-darkblue.navbar-default .navbar-toggle .icon-bar,
#navbar-darkblue.navbar-default .navbar-toggle:hover .icon-bar,
#navbar-darkblue.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #ffffff;
}

/*
 * Darkgreen navbar style
 */
#navbar-darkgreen.navbar-default { /* #006633 - #009933 */
    font-size: 14px;
    background-color: rgba(0, 102, 51, 1);
    background: -webkit-linear-gradient(top, rgba(0, 153, 51, 1) 0%, rgba(0, 102, 51, 1) 100%);
    background: linear-gradient(to bottom, rgba(0, 153, 51, 1) 0%, rgba(0, 102, 51, 1) 100%);
    border: 0px;
    border-radius: 0;
}
#navbar-darkgreen.navbar-default .navbar-nav>li>a:hover,
#navbar-darkgreen.navbar-default .navbar-nav>li>a:focus,
#navbar-darkgreen.navbar-default .navbar-nav>li>ul>li>a:hover,
#navbar-darkgreen.navbar-default .navbar-nav>li>ul>li>a:focus,
#navbar-darkgreen.navbar-default .navbar-nav>.active>a,
#navbar-darkgreen.navbar-default .navbar-nav>.active>a:hover,
#navbar-darkgreen.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(51, 51, 51, 1);
    background-color: rgba(255, 255, 255, 1);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
#sidebar-darkgreen, #column-darkgreen {
    background-color: #006633;
}
#navbar-darkgreen.navbar-default .navbar-toggle {
    border-color: #006633;
}
#navbar-darkgreen.navbar-default .navbar-toggle:hover,
#navbar-darkgreen.navbar-default .navbar-toggle:focus {
    background-color: #009933;
}
#navbar-darkgreen.navbar-default .navbar-nav>li>a,
#navbar-darkgreen.navbar-default .navbar-nav>li>ul>li>a,
#navbar-darkgreen.navbar-default .navbar-brand {
    color: #999999;
}
#navbar-darkgreen.navbar-default .navbar-toggle .icon-bar,
#navbar-darkgreen.navbar-default .navbar-toggle:hover .icon-bar,
#navbar-darkgreen.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #ffffff;
}

/*
 * Yellow navbar style
 */
#navbar-yellow.navbar-default { /* #99ff00 - #ccff00 */
    font-size: 14px;
    background-color: rgba(153, 255, 0, 1);
    background: -webkit-linear-gradient(top, rgba(204, 255, 0, 1) 0%, rgba(153, 255, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(204, 255, 0, 1) 0%, rgba(153, 255, 0, 1) 100%);
    border: 0px;
    border-radius: 0;
}
#navbar-yellow.navbar-default .navbar-nav>li>a:hover,
#navbar-yellow.navbar-default .navbar-nav>li>a:focus,
#navbar-yellow.navbar-default .navbar-nav>li>ul>li>a:hover,
#navbar-yellow.navbar-default .navbar-nav>li>ul>li>a:focus,
#navbar-yellow.navbar-default .navbar-nav>.active>a,
#navbar-yellow.navbar-default .navbar-nav>.active>a:hover,
#navbar-yellow.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(51, 51, 51, 1);
    background-color: rgba(255, 255, 255, 1);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
#sidebar-yellow, #column-yellow {
    background-color: #99ff00;
}
#navbar-yellow.navbar-default .navbar-toggle {
    border-color: #99ff00;
}
#navbar-yellow.navbar-default .navbar-toggle:hover,
#navbar-yellow.navbar-default .navbar-toggle:focus {
    background-color: #ccff00;
}
#navbar-yellow.navbar-default .navbar-nav>li>a,
#navbar-yellow.navbar-default .navbar-nav>li>ul>li>a,
#navbar-yellow.navbar-default .navbar-brand {
    color: #999999;
}
#navbar-yellow.navbar-default .navbar-toggle .icon-bar,
#navbar-yellow.navbar-default .navbar-toggle:hover .icon-bar,
#navbar-yellow.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #ffffff;
}

Answer 6

Do you have to change the CSS directly?你必须直接改变CSS吗？ What about...关于什么...

<nav class="navbar navbar-inverse" style="background-color: #333399;">
<div class="container-fluid">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>                        
  </button>
  <a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
  </ul>
</div>

Answer 7

Try this too.也试试这个。 This worked for me.这对我有用。

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background-color: #00a950;
  color: #000000;
}

Answer 8

If it's only about changing the color of the Navbar my suggestion would be to use: Bootstrap Magic .如果只是改变导航栏的颜色，我的建议是使用： Bootstrap Magic 。 You can change the values for different properties of the Navbar and see a preview.您可以更改导航栏不同属性的值并查看预览。

Download the result as a custom CSS style sheet or as a Less variables file.将结果下载为自定义 CSS 样式表或 Less 变量文件。 You can change values with input fields and color pickers.您可以使用输入字段和颜色选择器更改值。

Answer 9

In this navbar CSS, set to own color:在这个导航栏 CSS 中，设置为自己的颜色：

 /* Navbar */ .navbar-default { background-color: #F8F8F8; border-color: #E7E7E7; } /* Title */ .navbar-default .navbar-brand { color: #777; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #5E5E5E; } /* Link */ .navbar-default .navbar-nav > li > a { color: #777; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #333; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #555; background-color: #E7E7E7; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #555; background-color: #D5D5D5; } /* Caret */ .navbar-default .navbar-nav > .dropdown > a .caret { border-top-color: #777; border-bottom-color: #777; } .navbar-default .navbar-nav > .dropdown > a:hover .caret, .navbar-default .navbar-nav > .dropdown > a:focus .caret { border-top-color: #333; border-bottom-color: #333; } .navbar-default .navbar-nav > .open > a .caret, .navbar-default .navbar-nav > .open > a:hover .caret, .navbar-default .navbar-nav > .open > a:focus .caret { border-top-color: #555; border-bottom-color: #555; }

Answer 10

Example例子

Just try it like this:像这样尝试：

<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>

File `navabr.css`文件`navabr.css`

/* Navbar */
.navbar-default {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}
/* Title */
.navbar-default .navbar-brand {
    color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #5E5E5E;
}
/* Link */
.navbar-default .navbar-nav > li > a {
    color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #333;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #555;
    background-color: #D5D5D5;
}
/* Caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #777;
    border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #333;
    border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #555;
    border-bottom-color: #555;
}
/* Mobile version */
.navbar-default .navbar-toggle {
    border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #CCC;
}
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #777;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #333;
    }
}

The default major color uses are as below:默认的主要颜色使用如下：

Navbar Background: #F8F8F8导航栏背景：#F8F8F8
Navbar Border: #E7E7E7导航栏边框：#E7E7E7
Default Color: #777默认颜色：#777
Nav-brand Hover Color: #5E5E5E Nav 品牌悬停颜色：#5E5E5E
Hover Color: #333悬停颜色：#333
Active Background: #D5D5D5活动背景：#D5D5D5
Active Color: #555活性颜色：#555

You can learn more in To change navbar color in Twitter Bootstrap 3 .您可以在更改 Twitter Bootstrap 3 中的导航栏颜色中了解更多信息。

Answer 11

Inverse and default class name mention in Twitter Bootstrap cause them to be black and white color. Twitter Bootstrap 中的反向和默认类名会导致它们是黑色和白色。

Better, you should not override that and add a class near that and write you particular style for that:更好的是，您不应该覆盖它并在它附近添加一个类并为此编写特定的样式：

 my_style{ background-color: green; }

Answer 12

Use:用：

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

navbar-inverse {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}

25+ Bootstrap Nav Menus Code 25+ Bootstrap 导航菜单代码

Answer 13

It can be done directly by using style=" " attribute to whichever HTML tag you want to override it. 可以使用style =“”属性直接对要覆盖它的HTML标记执行此操作。 For example, 例如，

<nav class="navbar navbar-default" style="font-weight: bold; background-color: #569AAB;">

This overrides Bootstrap's default CSS. 这会覆盖Bootstrap的默认CSS。

There is no need to define a complete set of styling or CSS separately. 无需单独定义完整的样式集或CSS。

Answer 14

As of Bootstrap 4 you should use the 'bg' element to easily change the colour of a navbar. 从Bootstrap 4开始，您应该使用'bg'元素轻松更改导航栏的颜色。

Source: Changing Bootstrap NavBar color 来源： 更改Bootstrap NavBar颜色

在 Twitter Bootstrap 中更改导航栏颜色

问题描述

12 个解决方案

解决方案1
1415 已采纳 2013-08-30 09:27:34

Available navbars可用的导航栏

Default color usage默认颜色使用

Default style默认样式

Custom colored navbar examples自定义彩色导航栏示例

And finally, a little gift最后，一份小礼物

解决方案2
226 2013-08-30 10:44:38

解决方案3
51 2014-12-04 23:10:16

解决方案4
49 2013-08-31 23:49:27

Using Less少用

解决方案5
11 2015-11-22 11:51:52

Just add an id to the HTML navbar, such as:只需在 HTML 导航栏中添加一个 id，例如：

Examples applied to different types of navbars适用于不同类型导航栏的示例

Here is the CSS这是CSS

解决方案6
7 2016-09-21 15:38:17

解决方案7
6 2014-10-31 21:21:54

解决方案8
4 2013-10-13 16:59:46

解决方案9
3 2016-02-10 11:54:22

解决方案10
1 2017-12-14 06:48:17

Example例子

File `navabr.css`文件`navabr.css`

解决方案11
0 2017-05-16 08:11:50

解决方案12
0 2017-11-25 09:03:19

解决方案13
-1 2017-07-01 13:16:47

解决方案14
-1 2019-04-10 10:47:29

在 Twitter Bootstrap 中更改导航栏颜色

问题描述

12 个解决方案

解决方案1 1415 已采纳 2013-08-30 09:27:34

Available navbars可用的导航栏

Default color usage默认颜色使用

Default style默认样式

Custom colored navbar examples自定义彩色导航栏示例

And finally, a little gift最后，一份小礼物

解决方案2 226 2013-08-30 10:44:38

解决方案3 51 2014-12-04 23:10:16

解决方案4 49 2013-08-31 23:49:27

Using Less少用

解决方案5 11 2015-11-22 11:51:52

Just add an id to the HTML navbar, such as:只需在 HTML 导航栏中添加一个 id，例如：

Examples applied to different types of navbars适用于不同类型导航栏的示例

Here is the CSS这是CSS

解决方案6 7 2016-09-21 15:38:17

解决方案7 6 2014-10-31 21:21:54

解决方案8 4 2013-10-13 16:59:46

解决方案9 3 2016-02-10 11:54:22

解决方案10 1 2017-12-14 06:48:17

Example例子

File navabr.css文件navabr.css

解决方案11 0 2017-05-16 08:11:50

解决方案12 0 2017-11-25 09:03:19

解决方案13 -1 2017-07-01 13:16:47

解决方案14 -1 2019-04-10 10:47:29

解决方案1
1415 已采纳 2013-08-30 09:27:34

解决方案2
226 2013-08-30 10:44:38

解决方案3
51 2014-12-04 23:10:16

解决方案4
49 2013-08-31 23:49:27

解决方案5
11 2015-11-22 11:51:52

解决方案6
7 2016-09-21 15:38:17

解决方案7
6 2014-10-31 21:21:54

解决方案8
4 2013-10-13 16:59:46

解决方案9
3 2016-02-10 11:54:22

解决方案10
1 2017-12-14 06:48:17

File `navabr.css`文件`navabr.css`

解决方案11
0 2017-05-16 08:11:50

解决方案12
0 2017-11-25 09:03:19

解决方案13
-1 2017-07-01 13:16:47

解决方案14
-1 2019-04-10 10:47:29