热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

在twitterbootstrap2.0.4中更改导航栏颜色-Changenavbarcolorintwitterbootstrap2.0.4

Waswonderingifanyoneknewhowtochangethenavbarcolorinbootstrapv2.0.4想知道是否有人知道如何在bootstra

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中的navbar颜色

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

6 个解决方案

#1


65  

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

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)
  • 供应商前缀-moz,-ms,-webkit,-o(用于特定Web浏览器)
  • the standard (but not implemented yet)
  • 标准(但尚未实施)

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

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

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

背景色:#FFFFFF;已被替换为背景颜色:#eab92d直接进入boostrap.css(不推荐使用,但这仅仅是为了说明这一点)。

background-color: #EAB92D is applied first

background-color:首先应用#EAB92D

-moz-linear-gradient and -ms-linear-gradient are ignored

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

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

-webkit-gradient封面背景:#EAB92D(回到默认渐变)

-webkit-linear-gradient overrides -webkit-gradient

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

-o-linear-gradient and linear-gradient are ignored

- 线性梯度和线性梯度被忽略

.navbar-inner with backgroud-color replaced

.navbar-inner with backgroud-color replaced result

Change the color of .navbar-inner from colorzilla

从colorzilla更改.navbar-inner的颜色

You can easily create a cross browser gradient with colorzilla

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

Create a

Then copy the css generated by colorzilla in .navbar-inner {} inside the

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

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:

:链接的悬停颜色没有改变,可以用:

.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

#2


14  

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文件中,在导入bootstrap之前,定义一些变量:

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

@import 'bootstrap' ;

And got it :)

得到它:)

#3


5  

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

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

#4


1  

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类添加到navbar元素。

#5


0  

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

看看使用萤火虫。您可以单击相关的确切导航栏,并确切了解哪些CSS样式适用于它。

#6


0  

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 ;

推荐阅读
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • Html5-Canvas实现简易的抽奖转盘效果
    本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
  • 本文介绍了如何使用Express App提供静态文件,同时提到了一些不需要使用的文件,如package.json和/.ssh/known_hosts,并解释了为什么app.get('*')无法捕获所有请求以及为什么app.use(express.static(__dirname))可能会提供不需要的文件。 ... [详细]
  • CEPH LIO iSCSI Gateway及其使用参考文档
    本文介绍了CEPH LIO iSCSI Gateway以及使用该网关的参考文档,包括Ceph Block Device、CEPH ISCSI GATEWAY、USING AN ISCSI GATEWAY等。同时提供了多个参考链接,详细介绍了CEPH LIO iSCSI Gateway的配置和使用方法。 ... [详细]
  • 本文整理了常用的CSS属性及用法,包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等,方便开发者查阅和使用。 ... [详细]
  •  项目地址https:github.comffmydreamWiCar界面做的很难看,美工方面实在不在行。重点是按钮触摸事件的处理,这里搬了RepeatListener项目代码,例 ... [详细]
  • 本文由编程笔记#小编为大家整理,主要介绍了css回到顶部按钮相关的知识,希望对你有一定的参考价值。 ... [详细]
  • Java太阳系小游戏分析和源码详解
    本文介绍了一个基于Java的太阳系小游戏的分析和源码详解。通过对面向对象的知识的学习和实践,作者实现了太阳系各行星绕太阳转的效果。文章详细介绍了游戏的设计思路和源码结构,包括工具类、常量、图片加载、面板等。通过这个小游戏的制作,读者可以巩固和应用所学的知识,如类的继承、方法的重载与重写、多态和封装等。 ... [详细]
  • 生成式对抗网络模型综述摘要生成式对抗网络模型(GAN)是基于深度学习的一种强大的生成模型,可以应用于计算机视觉、自然语言处理、半监督学习等重要领域。生成式对抗网络 ... [详细]
  • Iamtryingtomakeaclassthatwillreadatextfileofnamesintoanarray,thenreturnthatarra ... [详细]
  • Spring源码解密之默认标签的解析方式分析
    本文分析了Spring源码解密中默认标签的解析方式。通过对命名空间的判断,区分默认命名空间和自定义命名空间,并采用不同的解析方式。其中,bean标签的解析最为复杂和重要。 ... [详细]
  • vb.net面试题,请大家帮忙,谢谢。如果需要讲详细一点,那就加我QQ531412815第4题,潜在的错误,这里的错误不是常规错误,属于那种只有在运行是才知道的错误:Catchex ... [详细]
  • quartus管脚分配后需要保存吗_嵌入式必须会的一些硬件面试题,要试一试吗?你过来呀!...
    1、下面是一些基本的数字电路知识问题,请简要回答之。(1)什么是Setup和Hold时间?答:SetupHoldTime用于测试芯片对输入 ... [详细]
  • 【Python 爬虫】破解按照顺序点击验证码(非自动化浏览器)
    #请求到验证码base64编码json_img_datajson_raw.get(Vimage)#获取到验证码编码 #保存验证码图片到本地defbase64_to_img(bstr ... [详细]
  • 我的vb.net中没有CrystalReport控件怎么打印报表啊?不会吧,在vb.net工程中,选择新项目的追加,在实用程序的选项中,可看到有CrystalReport的选项。它 ... [详细]
author-avatar
mobiledu2502881513
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有