如何更改Twitter Bootstrap 2.0.2导航栏的背景颜色?如何更改导航栏中所有元素的颜色以反映背景颜色?
您可以通过在自己的样式表中对象来覆盖引导颜色,包括 .navbar-inner 类,而不是修改bootstrap.css样式表,如下所示:
.navbar-inner
.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); }
你只需要用自己的方式修改所有这些样式,它们就会被拾取,就像这样的东西,例如,我消除所有渐变效果,只需设置一个纯黑色背景颜色:
.navbar-inner { background-color: #000; /* background color will be black for all browsers */ background-image: none; background-repeat: no-repeat; filter: none; }
您可以利用Colorzilla Gradient Editor等工具,为所有浏览器创建自己的渐变颜色,并用您自己的颜色替换原始颜色 .
正如我在评论中提到的,我不建议您直接修改bootstrap.css样式表,因为一旦样式表更新(当前版本为v2.0.2),所有更改都将丢失,因此您最好包括所有您在自己的样式表中的更改,与bootstrap.css样式表一起使用 . 但请记住覆盖所有适当的属性以使浏览器具有一致性 .
查看主题引导程序的一个很好的资源是:bootswatch.com . 它有很好的例子,也显示了代码 . 简而言之,他们使用lessc将bootstrap.css重新编译为新的color-theme.css . 他们的方法的好处是构建在引导程序之上,因此当更新引导程序时,您只需重新编译 .
有关使用lessc和bootstrap的链接:
Using bootstrap with less
Lessc.org
如果你没有时间学习“少”或做得不好,这里是一个肮脏的黑客......
在上面添加以下内容,您可以在其中呈现引导导航栏HTML - 根据需要更新颜色 .
<style type="text/css"> .navbar-inner { background-color: red; background-image: linear-gradient(to bottom, blue, green); background-repeat: repeat-x; border: 1px solid yellow; border-radius: 4px 4px 4px 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067); min-height: 40px; padding-left: 20px; padding-right: 20px; } .dropdown-menu { background-clip: padding-box; background-color: red; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px 6px 6px 6px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); display: none; float: left; left: 0; list-style: none outside none; margin: 2px 0 0; min-width: 160px; padding: 5px 0; position: absolute; top: 100%; z-index: 1000; } .btn-group.open .btn.dropdown-toggle { background-color: red; } .btn-group.open .btn.dropdown-toggle { background-color:lime; } .navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle { color:white; background-color:Teal; } .navbar .nav > li > a { color: white; float: none; padding: 10px 15px; text-decoration: none; text-shadow: 0 0px 0 #ffffff; } .navbar .brand { display: block; float: left; padding: 10px 20px 10px; margin-left: -20px; font-size: 20px; font-weight: 200; color: white; text-shadow: 0 0px 0 #ffffff; } .navbar .nav > li > a:focus, .navbar .nav > li > a:hover { color: white; text-decoration: none; background-color: transparent; } .navbar-text { margin-bottom: 0; line-height: 40px; color: white; } .dropdown-menu li > a { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 20px; color: white; white-space: nowrap; } .navbar-link { color: white; } .navbar-link:hover { color: white; } </style>
您可以下载自定义版本的bootstrap并将@navbarBackground设置为您想要的颜色 .
http://twitter.github.com/bootstrap/customize.html
我正在使用Bootstrap版本3.2.0,它看起来好像.navbar-inner不再存在 .
这里建议覆盖.navbar-inner的解决方案对我不起作用 - 颜色保持不变 .
当我覆盖.navbar时,颜色只会改变,如下所示:
.navbar { background-color: #A4C8EC; background-image: none; }
目前执行相同操作的最佳方法是使用安装LESS命令行编译器
$ npm install -g less jshint recess uglify-js
完成后,转到目录中的less文件夹,然后编辑文件variables.less,你可以根据需要改变很多变量,包括导航栏的颜色
@navbarCollapseWidth: 979px; @navbarHeight: 40px; @navbarBackgroundHighlight: #ffffff; @navbarBackground: darken(@navbarBackgroundHighlight, 5%); @navbarBorder: darken(@navbarBackground, 12%); @navbarText: #777; @navbarLinkColor: #777; @navbarLinkColorHover: @grayDark; @navbarLinkColorActive: @gray; @navbarLinkBackgroundHover: transparent; @navbarLinkBackgroundActive: darken(@navbarBackground, 5%);
完成此操作后,转到引导程序目录并运行命令make .
如果您使用的是LESS,则可以使用Mixins来减少代码 . 这里我将添加渐变,边框和边框半径:
.navbar-inner { #gradient > .vertical(#ffffff, #ECECEC); border: #E2E2E2; .border-radius(6px); }
*如果您正在使用rails gem,twitter-bootstrap-rails,我直接在bootstrap_and_overrides.css.less *文件中执行此操作
这就是我做的
.navbar-inverse .navbar-inner { background-color: #E27403; /* it's flat*/ background-image: none; } .navbar-inverse .navbar-inner { background-image: -ms-linear-gradient(top, #E27403, #E49037); background-image: -webkit-linear-gradient(top, #E27403, #E49037); background-image: linear-gradient(to bottom, #E27403, #E49037); }
它适用于所有导航器,你可以在这里看到演示http://caverne.fr在顶部
在bootstrap.css第4784行中,我们看到:
.navbar-inverse .navbar-inner { background-color: #FFFFFFF; background-image: -moz-linear-gradient(top, #222222, #111111); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111)); background-image: -webkit-linear-gradient(top, #222222, #111111); background-image: -o-linear-gradient(top, #222222, #111111); background-image: linear-gradient(to bottom, #222222, #111111); background-repeat: repeat-x; border-color: #252525; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0); }
您需要删除所有'background-image'属性声明才能获得所需的效果 .
在你需要更复杂的东西之前,不会发现剃须刀会说这样做吗?这有点像黑客,但可能适合想要快速修复的人的需求 .
.navbar-default .container-fluid{ background-color:#62ADD7; // Change the color margin: -1px -1px 10px -1px; // Get rid of the border }
如果您使用的是Bootstrap的LESS或SASS版本 . 最有效的方法是在LESS或SASS文件中更改变量名称 .
$navbar-default-color: #FFFFFF !default; $navbar-default-bg: #36669d !default; $navbar-default-border: $navbar-default-bg !default;
这是迄今为止最简单,最有效的方式来更改Bootstraps Navbar . 您无需编写覆盖,代码仍然干净 .
您可以在Bootstrap official website上自定义您自己的版本 .
我实际上只是覆盖了我想在site.css中更改的任何内容,你应该在bootstrap之后加载site.css,这样它就会覆盖这些类 . 我现在所做的只是用自己的小引导主题创建自己的类 . 像这样的小事
.navbar-nav li a{ color: #fff; font-size: 15px; margin-top: 9px; } .navbar-nav li a:hover{ background-color: #18678E; height: 61px; }
我也以同样的方式更改了验证错误 .
13 回答
您可以通过在自己的样式表中对象来覆盖引导颜色,包括
.navbar-inner
类,而不是修改bootstrap.css样式表,如下所示:你只需要用自己的方式修改所有这些样式,它们就会被拾取,就像这样的东西,例如,我消除所有渐变效果,只需设置一个纯黑色背景颜色:
您可以利用Colorzilla Gradient Editor等工具,为所有浏览器创建自己的渐变颜色,并用您自己的颜色替换原始颜色 .
正如我在评论中提到的,我不建议您直接修改bootstrap.css样式表,因为一旦样式表更新(当前版本为v2.0.2),所有更改都将丢失,因此您最好包括所有您在自己的样式表中的更改,与bootstrap.css样式表一起使用 . 但请记住覆盖所有适当的属性以使浏览器具有一致性 .
查看主题引导程序的一个很好的资源是:bootswatch.com . 它有很好的例子,也显示了代码 . 简而言之,他们使用lessc将bootstrap.css重新编译为新的color-theme.css . 他们的方法的好处是构建在引导程序之上,因此当更新引导程序时,您只需重新编译 .
有关使用lessc和bootstrap的链接:
Using bootstrap with less
Lessc.org
如果你没有时间学习“少”或做得不好,这里是一个肮脏的黑客......
在上面添加以下内容,您可以在其中呈现引导导航栏HTML - 根据需要更新颜色 .
您可以下载自定义版本的bootstrap并将@navbarBackground设置为您想要的颜色 .
http://twitter.github.com/bootstrap/customize.html
我正在使用Bootstrap版本3.2.0,它看起来好像.navbar-inner不再存在 .
这里建议覆盖.navbar-inner的解决方案对我不起作用 - 颜色保持不变 .
当我覆盖.navbar时,颜色只会改变,如下所示:
目前执行相同操作的最佳方法是使用安装LESS命令行编译器
完成后,转到目录中的less文件夹,然后编辑文件variables.less,你可以根据需要改变很多变量,包括导航栏的颜色
完成此操作后,转到引导程序目录并运行命令make .
如果您使用的是LESS,则可以使用Mixins来减少代码 . 这里我将添加渐变,边框和边框半径:
*如果您正在使用rails gem,twitter-bootstrap-rails,我直接在bootstrap_and_overrides.css.less *文件中执行此操作
这就是我做的
它适用于所有导航器,你可以在这里看到演示http://caverne.fr在顶部
在bootstrap.css第4784行中,我们看到:
您需要删除所有'background-image'属性声明才能获得所需的效果 .
在你需要更复杂的东西之前,不会发现剃须刀会说这样做吗?这有点像黑客,但可能适合想要快速修复的人的需求 .
如果您使用的是Bootstrap的LESS或SASS版本 . 最有效的方法是在LESS或SASS文件中更改变量名称 .
这是迄今为止最简单,最有效的方式来更改Bootstraps Navbar . 您无需编写覆盖,代码仍然干净 .
您可以在Bootstrap official website上自定义您自己的版本 .
我实际上只是覆盖了我想在site.css中更改的任何内容,你应该在bootstrap之后加载site.css,这样它就会覆盖这些类 . 我现在所做的只是用自己的小引导主题创建自己的类 . 像这样的小事
我也以同样的方式更改了验证错误 .