纯色导航栏Twitter Bootstrap

首先我是自举的总菜鸟。纯色导航栏Twitter Bootstrap

我有一个主要问题，试图找出我的网站的导航栏。

我想要做的唯一的事情就是让导航栏全黑以及白色文本。当进入手机屏幕时，按钮应该是相同的。纯黑色，右上角有三条白色破折号。

没有梯度...
没有阴影...
没有多余花哨的东西在所有...

我试图从我自己的样式表覆盖bootstrap.css （如之前的一些帖子所述），因为我不想混淆原始的CSS。但它永远不会起作用，我现在正在疯狂。

任何人都有一个简单的解决方案，然后我都耳朵。

来源

2013-01-05 hjartstrom

您能告诉我们您尝试过什么吗？ –

@WouterJ当然可以。这和我得到的一样接近，但是我不得不搅乱bootstrap.css和bootstrap-responsive.css> [link]（http://hjartstrom.com/test-site） – hjartstrom

你不应该在导航列表（我在说'div> ul> li> a> h3'）。标题引入了一段文字（以及内容列表等），这里是一个'nav'元素（'nav> ul> li> a'）中的列表项目。 – FelipeAls

我认为你可以很多覆盖任何梯度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代码），因为您不必在任何地方更改n*∞行，只需少数（请参阅mixins.less）

来源

2013-01-06 02:47:59 Sherbrow

这真的很好！它不会变黑，但我想我可以弄清楚。谢谢@Sherbrow – hjartstrom

@hjartstrom您只需更改颜色，然后在[自定义页面]（http://twitter.github.com/bootstrap/customize.html#variables）中检查'@ navbarBackground' – Sherbrow

去除a.btn.btn-navbar.btn类似乎与您的按钮来解决视觉问题，虽然我只跟你在评论中提供的链接进行了测试，而不是与原Twitter的引导代码新的一页

来源

2013-01-05 23:50:05 FelipeAls

谢谢菲利普！我正在这个时刻在未受破坏的bootstrap.css/bootstrap-responsive.css中创建新页面。但似乎我不能让导航栏变黑，不管我怎么做。如果你想看一下，让我知道。 – hjartstrom

'.navbar-inverse .navbar-inner {background-color：＃000000; }在Firebug中出现，图像编辑器确认整行背景为黑色。虽然文本有一个'＃777'color和一个带有一些rgba（）值的'text-shadow'。 – FelipeAls

纯色导航栏Twitter Bootstrap

回答

相关问题