在 Twitter Bootstrap 中更改导航栏颜色

css twitter-bootstrap bootstrap-4 navbar bootstrap-5

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

zessx

tl;dr - TWBSColor - 生成你自己的 Bootstrap 导航栏版本说明： - 在线工具：Bootstrap 3.3.2+ / 4.0.0+ - 这个答案：Bootstrap 3.0.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：悬停颜色（.nav-brand 的#5E5E5E）

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

自定义彩色导航栏示例

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

https://i.stack.imgur.com/3qhkK.jpg

和 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 - Generate your own Bootstrap navbar

[更新]：TWBSColor 现在生成 SCSS/SASS/Less/CSS 代码。
[更新]：从现在开始，您可以使用 Less 作为 TWBSColor 提供的默认语言< /em>
[更新]：TWBSColor 现在支持下拉菜单着色
[更新]：TWBSColor 现在允许选择您的版本（添加了 Bootstrap 4 支持）

当我尝试使用输出的配色方案时，颜色没有显示出来。在每个输出的 CSS 语句的末尾添加 !important 似乎已经解决了这个问题。示例：color: #ffffff; 变为 color: #ffffff !important;。

@Adrian：在包含引导程序自己的 css 之后，您应该包含带有这些自定义的 CSS 文件。其他可能无法正常工作的原因是，如果您使用 bootstrap-theme.css 为您的网站提供类似 Boostrap 2.x 的渐变外观

如何从 TWBSColor 添加生成的 css ？我在我的python烧瓶应用程序中使用来自netdna cdn的bootstrap.min.css 如何用从TWBSColor生成的导航栏覆盖默认导航栏？

只是背景而不是背景颜色对我有用

为什么要这么长的代码来覆盖单个元素的颜色？？？还有：我设法仅通过使用 !important 来更改它，并且：当按下其他菜单项时，第一个菜单项仍然被选中）-：

Z

Zim

引导程序 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 custom navbar color demo

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

https://i.stack.imgur.com/6cUsa.png

更改活动/悬停链接背景颜色也适用于相同的 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 Change Link and Background Color Demo

另请参阅：How can I change the Bootstrap 4 navbar button icon color?

<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

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

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

如果您想同时更改主题颜色（在导航栏之外），see this answer

如何在您的示例中更改导航栏 li:hover 背景颜色？

使用此方法，导航栏按钮不会显示在小屏幕上。

这是最好的解决方案，因为它避免覆盖任何 CSS 并担心使用重要！

我完全修改了我的答案。它应该为 3.x 和 Bootstrap 4 提供有效的解决方案。

是的，按预期工作，所有相关代码都在答案中@marcozen

f

fstopzero

我花了一段时间，但我发现包括以下内容可以更改导航栏颜色：

.navbar{ background-image: none; }

我不知道为什么这可以解决问题，但谢谢。

这是因为 bootstrap 添加了这个 /* background-image: linear-gradient(to bottom, #fff 0%, #f8f8f8 100%); */ 添加渐变。我不知道为什么他们包括这个和背景颜色

@DanielKobe @Sumeet 我刚刚检查了 Bootstrap 代码，没有添加 background-image，这会阻止 TWBSColor 工作。我可以知道您的 Bootstrap 版本和您的环境吗？（附加主题、CSS 库...）

@zessx 似乎是它的主题造成的。我正在使用 bootstrap 3.2.0 (CDN) 的简单主题。删除它解决了整个事情。

将 background-image 设置为 'none' 似乎是解决方案，至少对于最新版本而言，其中 background-image 具有特定的渐变，保留水蓝色，即使您自定义指定背景颜色也是如此。随着时间的推移，这个问题的公认答案可能已经过时了。我正在使用引导程序 3.3。

P

Peter Mortensen

少用

你也可以考虑编译你自己的版本。试试 http://getbootstrap.com/customize/（其中有一个单独的导航栏设置部分（默认导航栏和反向导航栏））或从 https://github.com/twbs/bootstrap 下载您自己的副本。

您将在 variables.less 中找到导航栏设置。 navbar.less 用于编译导航栏（取决于 variables.less 和 mixins.less）。

复制“导航栏默认部分”并填写您自己的颜色设置。更改 variables.less 中的变量将是最简单的方法（更改默认或反向导航栏不会有问题，因为每页只有一个导航栏）。

在大多数情况下，您不会更改所有设置：

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

您也可以尝试 http://twitterbootstrap3navbars.w3masters.nl/。此工具为您的自定义导航栏生成 CSS 代码。或者，您还可以向导航栏添加渐变颜色和边框。

P

Peter Mortensen

只需在 HTML 导航栏中添加一个 id，例如：

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

使用此 ID，您可以设置导航栏颜色的样式，还可以设置链接和下拉菜单的样式

应用于不同类型导航栏的示例

Black

Yellow

Darkblue

Red (Cherry)

Darkgreen

这是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; }

以上是引导程序 3 还是 4 ？

e

eaglei22

您必须直接更改CSS吗？关于什么...

<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>

z

zessx

也试试这个。这对我有用。

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

P

Peter Mortensen

如果只是改变导航栏的颜色，我的建议是使用：Bootstrap Magic。您可以更改导航栏不同属性的值并查看预览。

将结果下载为自定义 CSS 样式表或 Less 变量文件。您可以使用输入字段和颜色选择器更改值。

P

Peter Mortensen

在这个导航栏 CSS 中，设置为自己的颜色：

/* 导航栏 */ .navbar-default { 背景颜色：#F8F8F8;边框颜色：#E7E7E7； } /* 标题 */ .navbar-default .navbar-brand { color: #777; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { 颜色：#5E5E5E; } /* 链接 */ .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;背景颜色：#E7E7E7； } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: # 555;背景颜色：#D5D5D5； } /* 插入符号 */ .navbar-default .navbar-nav > .dropdown > a .caret { border-top-color: #777;边框底色：#777； } .navbar-default .navbar-nav > .dropdown > a:hover .caret, .navbar-default .navbar-nav > .dropdown > a:focus .caret {border-top-color: #333;边框底部颜色：#333； .navbar-default .navbar-nav > .open > a .caret, .navbar-default .navbar-nav > .open > a:hover .caret, .navbar-default .navbar-nav > .open > a:focus .caret { 边框顶部颜色：#555;边框底色：#555； }

“设置为自己的颜色”是什么意思？

P

Peter Mortensen

例子

试试这样：

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

文件 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; } }

默认的主要颜色用途如下：

导航栏背景：#F8F8F8

导航栏边框：#E7E7E7

默认颜色：#777

导航品牌悬停颜色：#5E5E5E

悬停颜色：#333

活动背景：#D5D5D5

活动颜色：#555

您可以在 To change navbar color in Twitter Bootstrap 3 中了解更多信息。

P

Peter Mortensen

Twitter Bootstrap 中提到的反向和默认类名导致它们是黑白的。

更好的是，您不应该覆盖它并在其附近添加一个类并为此编写特定的样式：

my_style{ 背景颜色：绿色； }

P

Peter Mortensen

利用：

https://i.stack.imgur.com/bniyM.png

<nav class="navbar navbar-inverse" role="navigation"></nav> navbar-inverse { background-color: #F8F8F8; border-color: #E7E7E7; }

25+ Bootstrap Nav Menus Code

关注公众号

不定期副业成功案例分享

想领先一步获取最新的外包任务吗？
立即订阅

相似问题

在 CSS 中设置 cellpadding 和 cellspacing？

有 CSS 父选择器吗？

当用户将鼠标悬停在列表项上时，如何将光标变为手形？

Twitter Bootstrap - 在行之间添加顶部空间

Twitter Bootstrap 表单文件元素上传按钮

使用 Twitter Bootstrap 3 居中列

如何使 Bootstrap 列的高度都相同？

与 Bootstrap 3 垂直对齐

是否可以将 CSS 应用于字符的一半？

在 Twitter Bootstrap 中更改导航栏颜色

关注公众号

想领先一步获取最新的外包任务吗？

相似问题

平台

支持

友情链接

联系我们