Question

想知道是否有人知道如何更改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);}

Answer 1

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

.navbar-inner in boostrap.css

css属性按特定顺序应用

background-color（由所有网络浏览器识别）
供应商前缀-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 with backgroud-color replaced

.navbar-inner with backgroud-color replaced result

从colorzilla

更改.navbar-inner的颜色

您可以使用colorzilla

轻松创建跨浏览器渐变

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

然后在.navbar-inner {}标记内的<style>中复制colorzilla生成的css。

.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 enter image description here

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

.navbar .btn-navbar（宽度＆lt; 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;
    }

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

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

活动链接的颜色相同

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

.navbar-inner result large .navbar-inner result small

Answer 2

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

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

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

@import 'bootstrap' ;

得到了它：）

Answer 3

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

Answer 4

如果您只想使用以前版本的Bootsrap黑暗外观导航栏，可以将.navbar-inverse类添加到navbar元素。

<div class="navbar navbar-inverse">

Answer 5

使用firebug看看。您可以单击相关的确切导航栏，并确切了解适用于哪种CSS样式。

Answer 6

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

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

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

6 个答案: