在 Twitter Bootstrap 中更改导航栏颜色

Question

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

原文由 Jamal Khan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

tl;dr - TWBSColor - 生成你自己的引导导航栏

版本说明：

• 在线工具：Bootstrap 3.3.2+ / 4.0.0+
• 这个答案：Bootstrap 3.0.x
• 对于 Bootstrap 5.x， 请查看文档

可用的导航栏

你有两个基本的导航栏：

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

默认颜色使用

以下是主要颜色及其用法：

• #F8F8F8 ：导航栏背景
• #E7E7E7 ：导航栏边框
• #777 : 默认颜色
• #333 ：悬停颜色（ #5E5E5E 用于 .nav-brand ）
• #555 : 活动颜色
• #D5D5D5 : 活动背景

默认样式

如果您想添加一些自定义样式，这里是您需要更改的 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;
    }
}

自定义彩色导航栏示例

以下是自定义彩色导航栏的四个示例：

和 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; }}}
}

最后，一个小礼物

我刚刚制作了一个脚本，可以让你生成你的主题： TWBSColor - 生成你自己的引导导航栏

[更新]：TWBSColor 现在生成 SCSS/SASS/Less/CSS 代码。

[更新]：从现在开始，您可以使用 Less 作为 TWBSColor 提供的默认语言

[更新]：TWBSColor 现在支持下拉菜单着色

[更新]：TWBSColor 现在允许选择您的版本（添加了 Bootstrap 4 支持）

原文由 zessx 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

Bootstrap 5（2021 年更新）

默认情况下，导航栏在 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 自定义导航栏颜色演示

---

Bootstrap 4.3（2020 年更新）

在 Bootstrap 4 中更改导航栏颜色是不同的（并且更容易一些）。您可以创建自定义导航栏类，然后引用它来更改导航栏而不影响其他 Bootstrap 导航。

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

引导程序 4.3+

在 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 自定义导航栏演示

更改活动/悬停链接 背景 颜色 也适用于相同的 CSS，但如果您希望 bg 颜色填充链接的整个高度，则必须调整填充…

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 更改链接和背景颜色演示

另请参阅： 如何更改 Bootstrap 4 导航栏按钮图标颜色？

---

**引导程序 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;
    }

Bootply 上的自定义导航栏演示

---

如果导航栏有下拉菜单，请添加以下内容以更改下拉菜单颜色：

 /* 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;
}

带下拉菜单的演示

---

如果您想一起 更改主题颜色（超出导航栏）， 请参阅此答案

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议