Twitter Bootstrap 中的导航栏颜色

Posted 2023-02-22

技术标签:

【中文标题】Twitter Bootstrap 中的导航栏颜色【英文标题】：navbar color in Twitter Bootstrap 【发布时间】：2012-04-09 19:23:39 【问题描述】：

如何更改 Twitter Bootstrap 2.0.2 导航栏的背景颜色？如何更改导航栏所有元素的颜色以反映背景颜色？

【问题讨论】：

已解决。在 bootstrap.css .navbar-inner background-color: #2c2c2c; 中进行了更改更改了背景颜色，评论了其他所有内容。谢谢。不建议您修改引导程序主 css 样式表，因为当您更新样式表时，所有更改都将丢失，因此只需在您自己的样式表中包含您需要的任何修改。谢谢安德烈斯，改变引导程序行为的其他方法是什么？导航栏对于大多数网站来说都是一种痛苦，因为人们无法相信网络在美观方面和功能方面一样好。您实际上可以覆盖您自己的样式表中的大部分引导规则，您根本不需要接触 bootstrap.css 样式表。这样，当引导程序更新时，您可以立即进行更新，所有更改都将保留，并且通过这种方式，您可以覆盖引导程序样式以满足您网站的需求（无论是字体还是颜色）。跨度> 更简单的答案：***.com/questions/18529274/… 【参考方案1】：

您可以覆盖引导颜色，包括 .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 Gradient Editor 等工具为所有浏览器创建自己的渐变颜色，并用自己的颜色替换原始颜色。

正如我在 cmets 中提到的，我不建议您直接修改 bootstrap.css 样式表，因为一旦样式表更新，您的所有更改都将丢失（当前版本是 ^v2.0.2 ) 所以最好将所有更改包含在自己的样式表中，与 bootstrap.css 样式表一起使用。但请记住覆盖所有适当的属性，以确保跨浏览器的一致性。

【讨论】：

background-image: none; 六次？ @DamianNowak 哇，刚刚注意到，感谢您的提示：D 终极大脑放屁。谢谢。我无法将背景颜色设置为任何内容并将其应用于整个导航栏，这让我抓狂。【参考方案2】：

了解如何设置主题引导的一个极好的资源是：bootswatch.com。它有很好的示例并显示代码。简而言之，他们使用 lessc 将 bootstrap.css 重新编译为您的新 color-theme.css。他们的方法的好处是构建在引导程序之上，所以当引导程序更新时，你只需重新编译。

关于使用lessc和bootstrap的链接：

Using bootstrap with less Lessc.org

【讨论】：

亚历山大的精彩资源。非常感谢。感谢 bootswatch 链接 :)【参考方案3】：

如果你没有时间学习“少”或正确地学习，这里有一个肮脏的黑客......

在上面渲染引导导航栏 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>

【讨论】：

【参考方案4】：

您可以下载自定义版本的引导程序并将@navbarBackground 设置为您想要的颜色。

http://twitter.github.com/bootstrap/customize.html

【讨论】：

【参考方案5】：

我正在使用 Bootstrap 3.2.0 版，它看起来好像 .navbar-inner 不再存在。

这里建议覆盖 .navbar-inner 的解决方案对我不起作用 - 颜色保持不变。

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

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

【讨论】：

【参考方案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%);

完成此操作后，转到引导目录并运行命令 make。

【讨论】：

【参考方案7】：

如果您使用 LESS，则可以使用 Mixins 来减少代码。这里我将添加渐变、边框和边框半径：

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

*如果您使用的是 rails gem，twitter-bootstrap-rails，我会直接在 bootstrap_and_overrides.css.less 文件中执行此操作*

【讨论】：

【参考方案8】：

我就是这样做的

.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 在顶部

【讨论】：

【参考方案9】：

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

您需要删除所有“背景图像”属性声明才能获得所需的效果。

【讨论】：

【参考方案10】：

在你需要更复杂的东西之前，occam 的剃刀不会说只做这个吗？这有点小技巧，但可能适合想要快速修复的人的需求。

.navbar-default .container-fluid
    background-color:#62ADD7; // Change the color
    margin: -1px -1px 10px -1px; // Get rid of the border

【讨论】：

【参考方案11】：

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

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

这是迄今为止更改 Bootstraps 导航栏最简单、最有效的方法。您无需编写覆盖，代码保持干净。

【讨论】：

【参考方案12】：

您可以在Bootstrap official website 上自定义您自己的版本。

【讨论】：

【参考方案13】：

我实际上只是覆盖了我想在 site.css 中更改的任何内容，您应该在引导后加载 site.css，这样它就会覆盖类。我现在所做的只是用我自己的小引导主题制作自己的课程。像这样的小事

.navbar-nav li a
    color: #fff;
    font-size: 15px;
    margin-top: 9px;

.navbar-nav li a:hover

    background-color: #18678E;
    height: 61px;

我还以同样的方式更改了验证错误之类的内容。

【讨论】：

以上是关于Twitter Bootstrap 中的导航栏颜色的主要内容，如果未能解决你的问题，请参考以下文章

Twitter Bootstrap - Internet Explorer 中的导航栏问题

激活 Twitter Bootstrap 导航栏链接

导航栏中的 Twitter Bootstrap 搜索框在 chrome 和 firefox 中呈现不同

关闭 Twitter Bootstrap 导航栏转换动画

导航栏顶部的 Twitter-Bootstrap-2 徽标图像

为啥用bootstrap做的导航栏没有黑色的底色？