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

Question

提问by jacobronniegeorge

Was wondering if anyone knew how to change the navbar color in bootstrap v2.0.4

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

I tried this solution it does not seem to work: navbar color in Twitter Bootstrap

我尝试了这个解决方案，它似乎不起作用：Twitter Bootstrap 中的导航栏颜色

Any other solutions? I have tried the customized bootstrap packages, but I am so far into development I can make a switch like that.

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

Code:

代码：

.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

回答by baptme

The color of the navbar come from the .navbar-inner lines 3582 to 3589 in bootstrap.css (for the version 2.0.4)

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

.navbar-inner in boostrap.css

boostrap.css 中的 .navbar-inner

The css properties are applied in a specific order

css 属性按特定顺序应用

background-color (recognised by all web browser)
vendor prefixes -moz, -ms, -webkit, -o (to serve specific web browser)
the standard (but not implemented yet)

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

Example of background-color override in boostrap.css with Chrome:

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

background-color:#ffffff;has been replaced with background-color:#eab92ddirectly into boostrap.css (it's not recommended but it's just to illustrate the point).

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

background-color: #EAB92Dis applied first

background-color: #EAB92D首先应用

-moz-linear-gradientand -ms-linear-gradientare ignored

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

-webkit-gradientcover background: #EAB92D(back to the default gradient)

-webkit-gradient封面background: #EAB92D（回到默认渐变）

-webkit-linear-gradientoverrides -webkit-gradient

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

-o-linear-gradientand linear-gradientare ignored

-o-linear-gradient并被linear-gradient忽略

.navbar-inner with backgroud-color replaced

.navbar-inner 替换了背景颜色

.navbar-inner with backgroud-color replaced result

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

Change the color of .navbar-inner from colorzilla

从 colorzilla 更改 .navbar-inner 的颜色

You can easily create a cross browser gradient with colorzilla

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

Create a <style>tag in <head>after bootstrap.css is called.

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

Then copy the css generated by colorzilla in .navbar-inner {}inside the <style>tag.

然后把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 */
}

The css generated by colorzilla overrides all the css properties from boostrap.css as you can see below

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

.navbar-inner large

.navbar-inner 大

.navbar-inner small enter image description here

.navbar-inner 小在此处输入图片说明

Changing '.navbar-inner' is not enough few other bits needs to be changed.

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

.navbar .btn-navbar(the button to open the menu when width<768px) share the same properties as .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(the vertical separator) uses the same colors used in the gradient

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

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

.active(the highlight on the active page) is corresponding to the dark color of the gradient

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

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

the color of the link on the menu needs to be changed as well, in this case 75% from the fair color of the gradient to white.

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

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

And finally the color of the .brand, in this case 50% from the fair color of the gradient to white.

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

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

The :hover color of links has not been changed bu can be with:

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

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

Same for the color of the active link

活动链接的颜色相同

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

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

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

Answer 2

回答by Traz

One simple method (with the same result that got baptme) : I use it in rails for conditional layout, (with gem bootstrap-sass).

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

in your scss file, before importing bootstrap, define some variables:

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

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

@import 'bootstrap' ;

And got it :)

并得到它:)

Answer 3

回答by Matoeil

You can also use the Twitter Bootstrap theme generator at http://stylebootstrap.info/and easily customized your themes.

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

Answer 4

回答by Johann

If you only want to use the previous version of Bootsrap's dark look for navbars, you can add the .navbar-inverse class to the navbar element.

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

<div class="navbar navbar-inverse">

Answer 5

回答by darkAsPitch

Take a look using firebug. You can click on the exact navbar in question and see exactly which css styles apply to it.

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

Answer 6

回答by Nilesh

Extending @Traz super concise answer for LESS for people using twitter-bootstrap-rails gem

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

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

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

提问by jacobronniegeorge

回答by baptme

回答by Traz

回答by Matoeil

回答by Johann

回答by darkAsPitch

回答by Nilesh

相关推荐

最近更新

标签

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

提问by jacobronniegeorge

回答by baptme

回答by Traz

回答by Matoeil

回答by Johann

回答by darkAsPitch

回答by Nilesh

相关推荐

Html 当有需要填写的文本字段时，如何制作弹出提醒？

Html 如何在跨度中包装文本？

Html SELECT 元素中的图像

Html 在同一行中对齐两个 <p> 元素

相关推荐

最近更新

标签