纯色导航栏 Twitter Bootstrap答案

【问题标题】：Solid color navbar Twitter Bootstrap纯色导航栏 Twitter Bootstrap
【发布时间】：2013-01-05 23:01:46
【问题描述】：

首先，我是个新手。

在为我的网站找出导航栏时，我遇到了一个主要问题。

我唯一想做的就是将导航栏设置为纯黑色和白色文本。并且当进入移动屏幕时，按钮是相同的。纯黑色，右上角有三个白色破折号。

没有渐变...
没有阴影...
根本没有多余的花哨的东西......

我试图从我自己的样式表中覆盖 bootstrap.css（如这里之前的一些帖子中所述），因为我不想弄乱原始 css。但它从来没有用过，我现在快疯了。

任何人都有一个简单的解决方案，那么我全神贯注。

【问题讨论】：

你能告诉我们你的尝试吗？
@WouterJ 当然可以。这是我得到的最接近的结果，但后来我不得不弄乱 bootstrap.css 和 bootstrap-responsive.css > link
你不应该在导航列表中使用标题（我说的是div>ul>li>a>h3）。标题介绍文本段落（和内容列表等），这里是nav 元素中的列表项（nav>ul>li>a）
你想为你的整个网站删除这个额外花哨的东西还是只删除导航栏？
非常相似的问题：stackoverflow.com/q/9869610/1478467

标签： twitter-bootstrap navigation nav navbar

【解决方案1】：

我认为您几乎可以使用background-image 覆盖任何渐变，例如阴影或半径更容易：Demo (jsfiddle)

a,
.btn,
.navbar-inner,
.btn-navbar,
.progress,
.progress .bar {
  background-image: none!important;
}

* {
  -webkit-box-shadow: none!important;
     -moz-box-shadow: none!important;
          box-shadow: none!important;

    text-shadow: none!important;

  -webkit-border-radius: 0!important;
     -moz-border-radius: 0!important;
          border-radius: 0!important;
}

如果您希望使其对浏览器更精确并且可能更轻巧，则应尝试修改 Less 混音器（或至少覆盖 Less 代码），因为您不必在任何地方更改 n*∞ 行，只需一些（见mixins.less）

【讨论】：

实际上效果很好！它不会变黑，但我想我可以弄清楚。谢谢@Sherbrow
@hjartstrom 你只需要改变颜色然后检查customize page中的@navbarBackground

【解决方案2】：

从a.btn.btn-navbar 中删除.btn 类似乎可以解决您的按钮的视觉问题，尽管我只使用您在评论中提供的链接对其进行了测试，而不是使用原始 Twitter Bootstrap 代码的新页面

【讨论】：

谢谢费利佩！此刻，我正在使用未受破坏的 bootstrap.css / bootstrap-responsive.css 处理新页面。但似乎无论如何我都无法让导航栏变成黑色。如果你想看看，请告诉我。
.navbar-inverse .navbar-inner { background-color: #000000; } 在 Firebug 中可见，图像编辑器确认整行的背景为黑色。虽然文本有一个 #777color 和一个 text-shadow 和一些 rgba() 值。