Twitter Bootstrap中的导航栏颜色
如何更改Twitter Bootstrap 2.0.2的导航栏的背景颜色？ 如何更改导航栏中所有元素的颜色以反映背景颜色？
您可以覆盖自举颜色，包括.navbar-inner类，方法是将其定位到您自己的样式表中，而不是修改bootstrap.css样式表，如下所示：
.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渐变编辑器等工具，为所有浏览器创build自己的渐变颜色，并用自己的颜色replace原来的颜色。
正如我在评论中提到的，我不会build议你直接修改bootstrap.css样式表，因为一旦样式表得到更新，所有的改变都会丢失（当前版本是v2.0.2 ），所以最好包含所有您自己的样式表中的更改，与bootstrap.css样式表一起使用。 但请记住覆盖所有适当的属性，以保持浏览器的一致性。
一个很好的资源，看看如何主题bootstrap是： bootswatch.com 。 它有很好的例子，并显示代码。 总之，他们使用lessc重新编译bootstrap.css到你的新的color-theme.css。 他们的方法的好处是build立在bootstrap之上，所以当bootstrap更新时，您只需重新编译。
关于使用lessc和bootstrap的链接：
- 使用less用bootstrap
- Lessc.org
如果你没有时间学习“less”或正确地做，这是一个肮脏的黑客…
在渲染引导导航栏的HTML上添加上面的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>
您可以下载自定义版本的引导程序，并将@navbarBackground设置为所需的颜色。
我正在使用Bootstrap 3.2.0版本，看起来好像.navbar-inner不再存在。
这里build议覆盖.navbar-inner的解决scheme对我不起作用 – 颜色保持不变。
当我覆盖.navbar时，颜色只会改变，如下所示：
.navbar { background-color: #A4C8EC; background-image: none; }
目前做同样的最好的方法是安装使用LESS命令行编译器
$ npm install -g less jshint recess uglify-js
一旦你完成了这个，然后去目录中的较less的文件夹，然后编辑文件variables.less，你可以根据你需要改变很多variables，包括导航栏的颜色
@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获取更less的代码。 这里我将添加一个渐变，边框和边框半径：
.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'属性声明以获得所需的效果。
奥卡姆的razor会不会说这样做，直到你需要更复杂的东西？ 这有点破解，但可能适合需要快速修复的人的需求。
.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文件中更改variables名称。
$navbar-default-color: #FFFFFF !default; $navbar-default-bg: #36669d !default; $navbar-default-border: $navbar-default-bg !default;
这是迄今为止最简单也是最有效的改变Bootstraps导航栏的方法。 你不需要重写，代码保持清洁。
您可以在Bootstrap官方网站上自定义您自己的版本。
实际上我只是在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; }
我也以同样的方式改变了validation错误。
