Bootstrap 的导航栏颜色

如何更改 Bootstrap 2.0.2的导航栏的背景颜色？如何更改导航栏中所有元素的颜色以反映背景颜色？

165632 次浏览
小开

了解如何主题化引导的一个极好的资源是: Bootswatch 网站。它有很好的例子和显示代码。简而言之，他们使用 lesc 将 bootstrap.css 重新编译为新的 color 主题。CSS.他们的方法的好处是构建在引导程序之上，所以当引导程序更新时，只需要重新编译。

关于使用 lessons 和 bootstrap 的链接:

小开
最佳答案

您可以通过在您自己的样式表中定位它而不是修改 bootstrap.css 样式表来覆盖引导程序的颜色，包括 .navbar-inner类，如下所示:

.navbar-inner {
background-color: #2c2c2c; /* fallback color, place your own */


/* Gradients for modern browsers, replace as you see fit */
background-image: -moz-linear-gradient(top, #333333, #222222);
background-image: -ms-linear-gradient(top, #333333, #222222);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
background-image: -webkit-linear-gradient(top, #333333, #222222);
background-image: -o-linear-gradient(top, #333333, #222222);
background-image: linear-gradient(top, #333333, #222222);
background-repeat: repeat-x;


/* IE8-9 gradient filter */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
}

你只需要用你自己的样式来修改所有这些样式，它们就会被挑选出来，就像下面这样，我消除了所有的渐变效果，只设置一个纯黑色背景颜色:

.navbar-inner {
background-color: #000; /* background color will be black for all browsers */
background-image: none;
background-repeat: no-repeat;
filter: none;
}

You can take advantage of such tools as the 颜色渐变编辑器 and create your own gradient colors for all browsers and replace the original colors with your own.

And as i mentioned on the comments, i would not recommend you modifying the bootstrap.css stylesheet directly as all of your changes will be lost once the stylesheet gets updated (current version is V2.0.2) so it is preferred that you include all of your changes inside your own stylesheet, in tandem with the bootstrap.css stylesheet. But remember to overwrite all of the appropriate properties to have consistency across browsers.

小开

If you are using LESS, you can use Mixins for less code. Here I will add a gradient, border, and border-radius:

.navbar-inner {
#gradient > .vertical(#ffffff, #ECECEC);
border: #E2E2E2;
.border-radius(6px);
}

* 如果您正在使用 Rails gem，twitter-bootstrap-ails，我将直接在 bootstrap _ and _ override. css.less 文件中执行此操作 *

小开

您可以下载自定义版本的 bootstrap，并将@navbarBack 设置为您想要的颜色。

http://twitter.github.com/bootstrap/customize.html

小开

目前最好的方法是安装 LESS 命令行编译器，使用

$ npm install -g less jshint recess uglify-js

Once you have done this, then go to the less folder in the directory and then edit the file variables.less and you can change a lot of variables according to what you need including the color of the navigation bar

@navbarCollapseWidth:             979px;


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


@navbarText:                      #777;
@navbarLinkColor:                 #777;
@navbarLinkColorHover:            @grayDark;
@navbarLinkColorActive:           @gray;
@navbarLinkBackgroundHover:       transparent;
@navbarLinkBackgroundActive:      darken(@navbarBackground, 5%);

完成此操作后，转到引导目录并运行 make 命令。

小开

如果你没有时间学习“更少”或者正确地做，这里有一个肮脏的黑客..。

添加上述您呈现的引导导航栏 HTML-更新颜色的需要。

<style type="text/css">


.navbar-inner {
background-color: red;
background-image: linear-gradient(to bottom, blue, green);
background-repeat: repeat-x;
border: 1px solid yellow;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
min-height: 40px;
padding-left: 20px;
padding-right: 20px;
}


.dropdown-menu {
background-clip: padding-box;
background-color: red;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px 6px 6px 6px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
display: none;
float: left;
left: 0;
list-style: none outside none;
margin: 2px 0 0;
min-width: 160px;
padding: 5px 0;
position: absolute;
top: 100%;
z-index: 1000;
}


.btn-group.open .btn.dropdown-toggle {
background-color: red;
}


.btn-group.open .btn.dropdown-toggle {
background-color:lime;
}


.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
color:white;
background-color:Teal;
}


.navbar .nav > li > a {
color: white;
float: none;
padding: 10px 15px;
text-decoration: none;
text-shadow: 0 0px 0 #ffffff;
}


.navbar .brand {
display: block;
float: left;
padding: 10px 20px 10px;
margin-left: -20px;
font-size: 20px;
font-weight: 200;
color: white;
text-shadow: 0 0px 0 #ffffff;
}


.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
color: white;
text-decoration: none;
background-color: transparent;
}


.navbar-text {
margin-bottom: 0;
line-height: 40px;
color: white;
}


.dropdown-menu li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 20px;
color: white;
white-space: nowrap;
}


.navbar-link {
color: white;
}


.navbar-link:hover {
color: white;
}


</style>
小开

我就是干这个的

.navbar-inverse .navbar-inner {
background-color: #E27403; /* it's flat*/
background-image: none;
}


.navbar-inverse .navbar-inner {
background-image: -ms-linear-gradient(top, #E27403, #E49037);
background-image: -webkit-linear-gradient(top, #E27403, #E49037);
background-image: linear-gradient(to bottom, #E27403, #E49037);
}

对所有的导航员都很有效 你可以在顶部看到 http://caverne.fr的演示

小开

在 bootstrap.css 行4784中，我们看到:

.navbar-inverse .navbar-inner {
background-color: #FFFFFFF;
background-image: -moz-linear-gradient(top, #222222, #111111);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
background-image: -webkit-linear-gradient(top, #222222, #111111);
background-image: -o-linear-gradient(top, #222222, #111111);
background-image: linear-gradient(to bottom, #222222, #111111);
background-repeat: repeat-x;
border-color: #252525;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
}

You need to remove all the 'background-image' property declarations to get the desired effect.

小开

您可以在 Bootstrap 官方网站上自定义您自己的版本。

小开

Occam 的剃刀不是说在你需要更复杂的东西之前先这么做吗？这是一个有点黑客，但可能适合需要一个快速修复的人的需要。

.navbar-default .container-fluid{
background-color:#62ADD7; // Change the color
margin: -1px -1px 10px -1px; // Get rid of the border
}
小开

我使用的是 Bootstrap 3.2.0版，它看起来好像. navbar-inner 不再存在了。

这里的解决方案建议重写。导航栏-内部不适合我-颜色保持不变。

颜色只有在我覆盖.Navbar 时才会改变，如下所示:

.navbar {
background-color: #A4C8EC;
background-image: none;
}
小开

我实际上只是覆盖了 site.css 中我想要改变的内容，你应该在 bootstrap 之后加载 site.css，这样它就会覆盖这些类。我现在所做的就是用我自己的引导主题创建我自己的类。像这样的小东西

.navbar-nav li a{
color: #fff;
font-size: 15px;
margin-top: 9px;
}
.navbar-nav li a:hover{


background-color: #18678E;
height: 61px;
}

我还以同样的方式更改了验证错误之类的内容。

小开

如果您使用的是较少或 SASS 版本的引导程序。最有效的方法是在 LESS 或 SASS 文件中更改变量名。

$navbar-default-color:              #FFFFFF !default;
$navbar-default-bg:                 #36669d !default;
$navbar-default-border:             $navbar-default-bg !default;

这是迄今为止更改 BootstrapsNavbar 最简单和最有效的方法。您不需要编写重写，代码仍然是干净的。


提交答案