Bootstrap源码解读（第七弹：导航条）

基础导航条

要制作一个基础导航条，要在制作导航的列表<ul class="nav">基础上添加类名“navbar-nav”，然后在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”。例如：

<div class="navbar navbar-default" role="navigation">
    <ul class="nav navbar-nav">
        <li class="active"><a href="##">首页</a></li>
        <li><a href="##">网站内容</a></li>
        <li><a href="##">关于我们</a></li>
    </ul>
</div>

“.navbar”样式的主要功能就是设置左右padding和圆角等效果，实现源码如下：

.navbar {
  position: relative;
  min-height: 50px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}

导航条的颜色都是通过“.navbar-default”来进行控制，实现源码如下：

.navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}

“.navbar-nav”样式是在导航“.nav”的基础上重新调整了菜单项的浮动与内外边距。而颜色和其他样式是通过配合父容器“navbar-default”来一起实现。实现源码如下：

.navbar-default .navbar-nav> li > a {
  color: #777;
}
.navbar-default .navbar-nav> li >a:hover,
.navbar-default .navbar-nav> li >a:focus {
  color: #333;
  background-color: transparent;
}
.navbar-default .navbar-nav> .active > a,
.navbar-default .navbar-nav> .active >a:hover,
.navbar-default .navbar-nav> .active >a:focus {
  color: #555;
  background-color: #e7e7e7;
}
.navbar-default .navbar-nav> .disabled > a,
.navbar-default .navbar-nav> .disabled >a:hover,
.navbar-default .navbar-nav> .disabled >a:focus {
  color: #ccc;
  background-color: transparent;
}

导航条标题

通过“navbar-header”和“navbar-brand”来实现，例如：

<div class="navbar navbar-default" role="navigation">
    　<div class="navbar-header">
    　    <a href="##" class="navbar-brand">标题</a>
    　</div>
    <ul class="nav navbar-nav">
        ...
    </ul>
</div>

主要是加大了字体设置，并且设置了最大宽度，实现源码如下：

.navbar-brand {
  float: left;
  height: 50px;
  padding: 15px 15px;
  font-size: 18px;
  line-height: 20px;
}
.navbar-brand:hover,
.navbar-brand:focus {
  text-decoration: none;
}
.navbar-brand > img {
  display: block;
}
@media (min-width: 768px) {
  .navbar > .container .navbar-brand,
  .navbar > .container-fluid .navbar-brand {
    margin-left: -15px;
  }
}

在默认导航条（navbar-