如何更改 Twitter Bootstrap 2.0.2 导航栏的背景颜色？如何更改导航栏所有元素的颜色以反映背景颜色？
问问题
165599 次
13 回答
134
您可以覆盖引导颜色，包括.navbar-inner类，通过在您自己的样式表中定位它而不是修改 bootstrap.css 样式表，如下所示：
.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;
}
您可以利用Colorzilla 渐变编辑器等工具，为所有浏览器创建自己的渐变颜色，并用您自己的颜色替换原始颜色。
正如我在评论中提到的那样，我不建议您直接修改 bootstrap.css 样式表，因为一旦样式表更新（当前版本是v2.0.2 ），您的所有更改都将丢失，因此最好包含所有您在自己的样式表中所做的更改，与 bootstrap.css 样式表一起。但请记住覆盖所有适当的属性以在浏览器之间保持一致性。
于 2012-03-28T15:17:58.497 回答
30
了解如何为引导程序设置主题的一个极好的资源是：bootswatch.com。它有很好的示例并显示代码。简而言之，他们使用 lessc 将 bootstrap.css 重新编译为您的新 color-theme.css。他们的方法的好处是建立在引导程序之上，所以当引导程序更新时，你只需重新编译。
关于使用 lessc 和 bootstrap 的链接：
于 2012-03-28T12:59:51.267 回答
6
如果您没有时间学习“少”或正确地学习，这里有一个肮脏的黑客......
在您呈现引导导航栏 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>
于 2013-01-07T20:20:49.360 回答
4
您可以下载自定义版本的引导程序并将 @navbarBackground 设置为您想要的颜色。
于 2012-08-23T21:59:01.817 回答
4
我正在使用 Bootstrap 3.2.0 版，它看起来好像 .navbar-inner 不再存在了。
这里建议覆盖 .navbar-inner 的解决方案对我不起作用 - 颜色保持不变。
仅当我覆盖 .navbar 时颜色才发生变化，如下所示：
.navbar {
background-color: #A4C8EC;
background-image: none;
}
于 2014-07-04T14:55:23.663 回答
3
目前最好的方法是使用安装 LESS 命令行编译器
$ npm install -g less jshint recess uglify-js
完成此操作后，转到目录中的less文件夹，然后编辑文件variables.less，您可以根据需要更改很多变量，包括导航栏的颜色
@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。
于 2012-09-29T13:42:17.077 回答
2
如果你使用 LESS，你可以使用 Mixins 来减少代码。在这里，我将添加渐变、边框和边框半径：
.navbar-inner {
#gradient > .vertical(#ffffff, #ECECEC);
border: #E2E2E2;
.border-radius(6px);
}
*如果您使用的是 rails gem，twitter-bootstrap-rails，我会直接在 bootstrap_and_overrides.css.less 文件中执行此操作*
于 2012-05-31T01:18:47.213 回答
2
这就是我所做的
.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在顶部
于 2013-07-03T08:59:41.687 回答
1
在 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);
}
您需要删除所有“背景图像”属性声明以获得所需的效果。
于 2013-09-21T15:59:42.293 回答
1
occam 的剃刀不会说在您需要更复杂的东西之前就这样做吗？这有点像黑客，但可能适合想要快速修复的人的需求。
.navbar-default .container-fluid{
background-color:#62ADD7; // Change the color
margin: -1px -1px 10px -1px; // Get rid of the border
}
于 2014-04-18T22:03:44.320 回答
1
如果您使用的是 LESS 或 SASS 版本的 Bootstrap。最有效的方法是在 LESS 或 SASS 文件中更改变量名。
$navbar-default-color: #FFFFFF !default;
$navbar-default-bg: #36669d !default;
$navbar-default-border: $navbar-default-bg !default;
这是迄今为止更改 Bootstraps 导航栏最简单和最有效的方法。您不需要编写覆盖，并且代码保持干净。
于 2015-03-04T09:43:59.030 回答
0
您可以在Bootstrap 官网自定义自己的版本。
于 2013-10-28T08:02:28.780 回答
0
我实际上只是覆盖了我想在 site.css 中更改的任何内容，您应该在引导后加载 site.css，这样它就会覆盖类。我现在所做的只是用我自己的小引导主题制作了自己的课程。像这样的小事
.navbar-nav li a{
color: #fff;
font-size: 15px;
margin-top: 9px;
}
.navbar-nav li a:hover{
background-color: #18678E;
height: 61px;
}
我还以相同的方式更改了验证错误之类的内容。
于 2014-08-12T11:10:37.487 回答