我将如何修改CSS以更改Twitter Bootstrap中导航栏的颜色？
在Twitter Bootstrap中更改导航栏颜色
第1820篇《在Twitter Bootstrap中更改导航栏颜色》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共12个回答
少用
您也可以考虑编译自己的版本。尝试http://getbootstrap.com/customize/（其中有一个Navbars设置的单独部分（默认navbar和Inverted Navbar））或从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代码。（可选）您还可以向导航栏添加渐变颜色和边框。
例
像这样尝试：
<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<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
您可以在Twitter Bootstrap 3中的“更改导航栏颜色”中了解更多信息。
Twitter Bootstrap中提到的反向名称和默认类名称导致它们为黑色和白色。
更好的是，您不应覆盖它，并在其附近添加一个类并为此编写特定的样式：
my_style{
background-color: green;
}采用：
<nav class="navbar navbar-inverse" role="navigation"></nav>
navbar-inverse {
background-color: #F8F8F8;
border-color: #E7E7E7;
}
更新了2018年的Bootstrap 4
在Bootstrap 4中更改Navbar颜色是不同的（并且稍微容易一些）。您可以创建一个自定义的navbar类，然后引用它来更改navbar，而不会影响其他Bootstrap导航。
<nav class="navbar navbar-custom">...</nav>
Bootstrap 4.0
在Bootstrap 4中，更改Navbar所需的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;
}
更改活动/悬停链接的背景颜色也适用于相同的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;
}
引导程序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;
}
如果导航栏具有下拉菜单，请添加以下内容以更改下拉颜色：
/* 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;
}
如果仅是要更改导航栏的颜色，我的建议是使用：Bootstrap Magic。您可以更改导航栏不同属性的值并查看预览。
将结果下载为自定义CSS样式表或Less变量文件。您可以使用输入字段和颜色选择器更改值。
在此导航栏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;
}也尝试一下。这对我有用。
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
background-color: #00a950;
color: #000000;
}
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：悬停颜色（#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-生成自己的Bootstrap导航栏
[Update]: TWBSColor now generates SCSS/SASS/Less/CSS code.
[Update]: From now, you can use Less as the default language provided by TWBSColor
[Update]: TWBSColor now supports drop down menus colorization
[Update]: TWBSColor now allows to choose your version (Bootstrap 4 support added)
您是否必须直接更改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>
我花了一段时间，但发现包含以下内容使得可以更改导航栏颜色：
.navbar{
background-image: none;
}
相似问题
问题类别
只需向HTML导航栏添加一个ID，例如：
使用此ID，您可以设置导航栏颜色的样式，还可以设置链接和下拉菜单的样式
适用于不同类型导航栏的示例
黑色
黄色
深蓝
红樱桃）
深绿色
这是CSS