在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;
}