Twitter Bootstrap中的导航栏颜色

Question

我该如何更改 Twitter Bootstrap 2.0.2 导航栏的背景颜色？如何将导航栏中所有元素的颜色改为反映背景颜色的颜色?

- Gattoo

---

已解决。 在bootstrap.css中进行了更改。.navbar-inner { background-color: #2c2c2c;更改了背景颜色，并注释了其他所有内容。谢谢。 - Gattoo

不建议您修改Bootstrap主CSS样式表，因为当您更新样式表时，所有更改都将丢失。所以，请在您自己的样式表中包含您需要的任何修改。 - Andres Ilich

谢谢Andres，改变Bootstrap行为的其他方法有哪些？ 对于大多数网站来说，导航栏是一个痛点，因为人们往往难以相信Web在美观性和功能性方面同样出色。 - Gattoo

你实际上可以在你自己的样式表中覆盖大多数引导程序规则，完全不需要触及bootstrap.css样式表。这样，当引导程序更新时，你只需立即更新它，所有更改都将保留，并且通过这种方式，你可以覆盖boostrap样式以适应你网站的需求（无论是字体还是颜色）。 - Andres Ilich

更简单的答案：https://dev59.com/ImMl5IYBdhLWcg3wR1WD - Chris Johnson

httpTWBSColor - 生成您自己的Bootstrap导航栏：https://dev59.com/ImMl5IYBdhLWcg3wR1WD#18529465 - xrcwrn

Answer 1

你可以通过在自己的样式表中将其作为目标，而不是修改bootstrap.css样式表，来覆盖Bootstrap颜色，包括 .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渐变编辑器等工具为所有浏览器创建自己的渐变颜色，并将原来的颜色替换为自己的颜色。

正如我在评论中提到的，我不建议直接修改bootstrap.css样式表，因为一旦样式表更新（当前版本为^v2.0.2），所有更改都会丢失，所以最好将所有更改包含在自己的样式表中，并与bootstrap.css样式表配合使用。但请记住覆盖所有适当的属性以在各个浏览器中保持一致性。

- Andres Ilich

---

background-image: none; 重复了六次？ - Nowaker

@DamianNowak 哇，刚刚注意到了，谢谢提示 :D 真是个大脑短路。 - Andres Ilich

谢谢。我之前一直没办法将背景颜色设置为任何颜色并应用到整个导航栏上，这让我很疯狂。 - Automatico

Answer 2

一个很好的资源来了解如何主题化bootstrap是：bootswatch.com。它有很好的示例并展示出代码。总之，它们使用lessc重新编译bootstrap.css到你的新的颜色主题css中。他们方法的好处在于其基于bootstrap构建，所以当bootstrap更新时，只需要重新编译即可。

关于使用lessc和bootstrap的链接：

• 使用less与bootstrap
• Lessc.org

- Alexander Poslavsky

---

非常棒的资源，Alexander。非常感谢。 - Gattoo

感谢提供bootswatch链接 :) - Akshat Jiwan Sharma

Answer 3

如果您没有时间学习“less”或者无法正确使用它，这里有一个不太规范的方法...

在您渲染Bootstrap导航栏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>

- JGilmartin

Answer 4

你可以下载定制版的bootstrap，然后将@navbarBackground设置为你想要的颜色。 http://twitter.github.com/bootstrap/customize.html

- Andrew Thomas

Answer 5

我正在使用Bootstrap版本3.2.0，似乎不再存在.navbar-inner。

这里建议覆盖.navbar-inner的解决方案对我无效 - 颜色仍然保持不变。

只有在我覆盖了如下所示的.navbar时，颜色才会改变：

.navbar {
    background-color: #A4C8EC;
    background-image: none;
}

- paulo62

Answer 6

目前最好的方法是使用命令行安装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%);

完成此操作后，进入您的bootstrap目录并运行make命令。

- gauravmunjal

Answer 7

这就是我的工作。

.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上方查看演示。

- user2545728

Answer 8

如果您正在使用LESS，可以使用Mixins来写更少的代码。 这里我将添加渐变、边框和边框半径:

.navbar-inner {
  #gradient > .vertical(#ffffff, #ECECEC);
  border: #E2E2E2;
  .border-radius(6px);
}

如果您正在使用Rails gem，twitter-bootstrap-rails，我会直接在文件bootstrap_and_overrides.css.less中进行操作。

- Ryan

Answer 9

如果您正在使用 Bootstrap 的 LESS 或 SASS 版本，最有效的方法是在 LESS 或 SASS 文件中更改变量名称。

$navbar-default-color:              #FFFFFF !default;
$navbar-default-bg:                 #36669d !default;
$navbar-default-border:             $navbar-default-bg !default;

这是目前改变Bootstrap导航栏最简单、最有效的方法。您不需要编写覆盖，代码保持干净。

- Ronak Jain

Answer 10

在 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”属性声明，以获得所需的效果。

- Roopkunwar