在 twitter bootstrap 2.0.4 中更改导航栏颜色答案

【问题标题】：Change navbar color in twitter bootstrap 2.0.4在 twitter bootstrap 2.0.4 中更改导航栏颜色
【发布时间】：2012-06-27 03:21:02
【问题描述】：

想知道是否有人知道如何在 bootstrap v2.0.4 中更改导航栏颜色

我尝试了这个解决方案，它似乎不起作用：navbar color in Twitter Bootstrap

还有其他解决方案吗？我已经尝试过定制的引导程序包，但我还处于开发阶段，我可以进行这样的切换。

代码：

.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);}

【问题讨论】：

你的意思是它似乎不起作用？如果您查看浏览器的开发工具，您的样式是否会被应用，然后可能会被其他代码覆盖？
无论您在哪里包含 bootstrap.css 和您自己的覆盖引导程序的样式表，请确保最后包含您的样式表。
感谢您的评论，我已经覆盖了“代码”背景图像，但没有覆盖渐变。一旦我覆盖了那些，我就没事了，得到了我想要的颜色。其次，我做出了约翰建议的改变
我不能投票给那些 cmets？

标签： css html twitter-bootstrap

【解决方案1】：

一个简单的方法（与得到 baptme 的结果相同）：我在 rails 中使用它进行条件布局，（使用 gem bootstrap-sass）。

在你的 scss 文件中，在导入 bootstrap 之前，定义一些变量：

$navbarBackground:                #c79810 ;
$navbarBackgroundHighlight:       #eab92d ;
$navbarText:                      #f9ed9d ;
$navbarLinkColor:                 #f9ed9d ;
$navbarSearchPlaceholderColor:    #EEC844 ;

@import 'bootstrap' ;

得到它:)

【讨论】：

【解决方案2】：

如果你只想使用以前版本的 Bootsrap 的暗色查找导航栏，可以在导航栏元素中添加 .navbar-inverse 类。

<div class="navbar navbar-inverse">

【讨论】：

【解决方案3】：

为使用 twitter-bootstrap-rails gem 的人扩展 @Traz 的 LESS 超级简洁答案

@navbarBackground:                #c79810 ;
@navbarBackgroundHighlight:       #eab92d ;
@navbarText:                      #f9ed9d ;
@navbarLinkColor:                 #f9ed9d ;
@navbarSearchPlaceholderColor:    #EEC844 ;

【讨论】：

【解决方案4】：

您还可以在http://stylebootstrap.info/ 使用 Twitter Bootstrap 主题生成器并轻松自定义您的主题。

【讨论】：

【解决方案5】：

导航栏的颜色来自 bootstrap.css 中的 .navbar-inner 行 3582 到 3589（适用于 2.0.4 版本）

css 属性按特定顺序应用

背景色（所有浏览器都能识别）
供应商前缀 -moz、-ms、-webkit、-o（用于服务特定的网络浏览器）
标准（但尚未实施）

使用 Chrome 的 boostrap.css 中的背景颜色覆盖示例：

background-color:#ffffff; 已被 background-color:#eab92d 直接替换为 boostrap.css（不推荐，但只是为了说明这一点）。

background-color: #EAB92D 先应用

-moz-linear-gradient 和 -ms-linear-gradient 被忽略

-webkit-gradient覆盖background: #EAB92D（回到默认渐变）

-webkit-linear-gradient 覆盖 -webkit-gradient

-o-linear-gradient 和 linear-gradient 被忽略

从 colorzilla 更改 .navbar-inner 的颜色

您可以使用colorzilla轻松创建跨浏览器渐变

在调用 bootstrap.css 后在<head> 中创建一个<style> 标签。

然后将colorzilla生成的css复制到.navbar-inner {}里面<style>标签里面。

.navbar-inner {
  background: #eab92d; /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhYjkyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNzk4MTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  #eab92d 0%, #c79810 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eab92d), color-stop(100%,#c79810)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #eab92d 0%,#c79810 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eab92d', endColorstr='#c79810',GradientType=0 ); /* IE6-8 */
}

colorzilla 生成的 css 会覆盖 boostrap.css 中的所有 css 属性，如下所示

更改 '.navbar-inner' 是不够的，需要更改其他位。

.navbar .btn-navbar（宽度.navbar-inner共享相同的属性

.navbar-inner, .navbar .btn-navbar {
    background: #eab92d; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhYjkyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNzk4MTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #eab92d 0%, #c79810 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eab92d), color-stop(100%,#c79810)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #eab92d 0%,#c79810 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eab92d', endColorstr='#c79810',GradientType=0 ); /* IE6-8 */
    }

.divider-vertical（垂直分隔符）使用与渐变相同的颜色

.navbar .divider-vertical {
    background-color: #c79810;
    border-right: 1px solid #eab92d;
    }

.active（活动页面上的高亮）对应渐变的深色

.navbar .nav .active > a, .navbar .nav .active > a:hover {
    background-color: #c79810;
    }

菜单上链接的颜色也需要更改，在这种情况下，75% 从渐变的公平颜色变为白色。

.navbar .nav > li > a {
    color: #f9ed9d;
    }

最后是 .brand 的颜色，在这种情况下，50% 从渐变的公平颜色变为白色。

.navbar-fixed-top .brand {
    color: #634c08;color: #f4dc87;
    }

链接的：悬停颜色没有改变，但可以：

.navbar .nav > li > a:hover {color:white;}

活动链接的颜色相同

.navbar .nav .active > a, .navbar .nav .active > a:hover {color:white;}

【讨论】：

优秀的答案！我正在寻找如何更改文本颜色和其他内容，您的帖子对我帮助很大。
如何将链接的颜色更改为渐变的公平颜色的 75% 为白色？ .brand 的 50% 怎么样？我正在使用 colorzilla 网站。

【解决方案6】：

看看使用萤火虫。您可以单击有问题的确切导航栏，并准确查看适用于它的 css 样式。

【讨论】：