引导导航栏定制(Bootstrap nav bar customization)

我使用的引导3.1.1导航栏，并希望建立导航栏所示的形象。 任何人都可以请帮助我，我怎样才能得到我的导航栏，以及如何我可以将其更改为红色选择导航项在顶部的灰色地带。

以下是我的代码

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#laser">LASER</a></li>
        </ul>
      </div>
    </div><!--/.container -->
  </nav><!--/.navbar-->

我是一个新手的任何指导，将不胜感激。 以下是的jsfiddle 。 我如何可以覆盖.navbar逆边境当孩子

活跃。

Answer 1:

这里是一个解决方案：

我加了5px灰色边框将整个顶部navbar-inverse ，然后通过对阴性切缘拉列表项增长5px的li秒。 我还添加了透明边框为5px顶到其余li s到拉平出来。

.navbar-inverse .navbar-nav > li.active {
    border-top: 5px solid #E61C3D;
}
.navbar-inverse .navbar-nav > li.active a{
    color: #E61C3D;
}
.navbar-inverse{
    border-top: 5px solid gray;
}
.navbar-inverse .navbar-nav > li{
    margin-top: -5px;
    border-top: 5px solid transparent;
}

编辑：我也有使color: #E61C3D的活动链接。

下面是小提琴的链接： http://jsfiddle.net/au4R4/4/

Answer 2:

这可以在不引导来完成，只有CSS是罚款。

ul li {
    list-style: none;
    text-transform: uppercase;

}
ul li a {
    float: left;
    padding: 15px;
    background: #444;
    color: #fff;
    text-decoration: none;
    border-top: 5px solid #ddd;
}
ul li a:hover, ul li.active a {
    background: #222;
    color: #cc0233;
    border-top: 5px solid #cc0233;
}

选中此的jsfiddle; http://jsfiddle.net/f4hYB/2

文章来源: Bootstrap nav bar customization