6-5 导航条中的按钮、文本和链接

Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外，还可以使用其他元素。框架提供了三种其他样式：

1、导航条中的按钮navbar-btn

2、导航条中的文本navbar-text

3、导航条中的普通链接navbar-link

但这三种样式在框架中使用时受到一定的限制，需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题。

先来看看这三种样式对应的源码：

/*源码请查看bootstrap.css文件第3914行～第3939行*/

.navbar-btn {
margin-top: 8px;
margin-bottom: 8px;
}
.navbar-btn.btn-sm {
margin-top: 10px;
margin-bottom: 10px;
}
.navbar-btn.btn-xs {
margin-top: 14px;
margin-bottom: 14px;
}
.navbar-text {
margin-top: 15px;
margin-bottom: 15px;
}
@media (min-width: 768px) {
.navbar-text {
float: left;
margin-right: 15px;
margin-left: 15px;
  }
.navbar-text.navbar-right:last-child {
margin-right: 0;
  }

}

/*bootstrap.css文件第3952行～第3954行*/

.navbar-default .navbar-text {
  color: #777;
}

/*bootstrap.css文件第4035行～第4037行*/

.navbar-inverse .navbar-text {
color: #999;
}

/*boostrap.css文件第4017行～第4022行*/

.navbar-default .navbar-link {
color: #777;
}
.navbar-default .navbar-link:hover {
color: #333;
}

/*bootstrap.css文件第4106行～第4111行*/

.navbar-inverse .navbar-link {
color: #999;
}
.navbar-inverse .navbar-link:hover {
color: #fff;
}

navbar-btn和navbar-link在上一小节已经讲过，现在我们来看一下navbar-text的一个简单应用（见右侧代码编辑区11-20行）

在结果窗口中查看效果，可以看出明显的存在问题，通过浏览器调试工具，可以看到a标签有margin-top和margin-bottom的值为15px，欲将其对齐，我们将上面的结构做一定的调整：

<div class="navbar navbar-default" role="navigation">
　<div class="navbar-header">
　    <a href="##" class="navbar-brand">慕课网</a>
　</div>
  <div class="nav navbar-nav">
      <a href="##" class="navbar-text">Navbar Text</a>
      <a href="##" class="navbar-text">Navbar Text</a>
      <a href="##" class="navbar-text">Navbar Text</a>
  </div>
</div>

换换标签就OK了。查看右侧代码结果窗口。