33

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

我尝试了这个解决方案，它似乎不起作用：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);}
4

6 回答 6

65

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

boostrap.css 中的 .navbar-inner

css 属性以特定顺序应用

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

使用 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忽略

.navbar-inner 替换为背景色

.navbar-inner 与背景颜色替换结果

从 colorzilla 更改 .navbar-inner 的颜色

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

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

然后将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 large

.navbar-inner small 在此处输入图像描述

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

.navbar .btn-navbar（宽度<768px时打开菜单的按钮）与.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;
    }

链接的 :hover 颜色未更改，但可以使用：

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

活动链接的颜色相同

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

.navbar-inner 结果大 .navbar-inner 结果小

于 2012-07-04T16:20:28.197 回答
14

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

在您的 scss 文件中，在导入引导程序之前，定义一些变量：

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

@import 'bootstrap' ;

并得到它:)

于 2012-08-18T03:44:32.363 回答
5

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

于 2012-11-27T18:50:49.063 回答
1

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

<div class="navbar navbar-inverse">
于 2013-03-22T09:50:32.773 回答
0

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

于 2012-07-04T00:46:58.943 回答
0

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

@navbarBackground:                #c79810 ;
@navbarBackgroundHighlight:       #eab92d ;
@navbarText:                      #f9ed9d ;
@navbarLinkColor:                 #f9ed9d ;
@navbarSearchPlaceholderColor:    #EEC844 ;
于 2013-01-26T22:36:44.947 回答