在Bootstrap框中，导航条和导航从外观上差别不是太多，但在实际使用中导航条要比导航复杂得多。我们先来看导航条中最基础的一个——基础导航条。

使用方法：

在制作一个基础导航条时，主要分以下几步：

第一步：首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”

第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”

示例查看右侧代码编辑（10-19行）。

“.navbar”样式的主要功能就是设置左右padding和圆角等效果，但他和颜色相关的样式没有进行任何的设置。其主要源码如下：

/*源码查看bootstrap.css文件第3642行～第3647行*/

.navbar {

  position: relative;

  min-height: 50px;

  margin-bottom: 20px;

  border: 1px solid transparent;

}

原理分析：

而导航条的颜色都是通过“.navbar-default”来进行控制：

/*源码查看bootstrap.css文件第3940行～第3943行*/

.navbar-default {

  background-color: #f8f8f8;

  border-color: #e7e7e7;

}

navbar-nav样式是在导航.nav的基础上重新调整了菜单项的浮动与内外边距。同时也不包括颜色等样式设置，源码请查看bootstrap.css文件第3785行～第3830行，我们把代码节选出来放入右侧bootstrap.css中。

而颜色和其他样式是通过配合父容器“navbar-default”来一起实现：

/*源码请查看bootstrap.css文件第3955行～第3974行*/

.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;

}

站内地址：

站外地址：bootstrap学习笔记之基础导航条  http://www.imooc.com/code/3111