在Bootstrap框中，導(dǎo)航條和導(dǎo)航從外觀上差別不是太多，但在實(shí)際使用中導(dǎo)航條要比導(dǎo)航復(fù)雜得多。我們先來(lái)看導(dǎo)航條中最基礎(chǔ)的一個(gè)——基礎(chǔ)導(dǎo)航條。

使用方法：

在制作一個(gè)基礎(chǔ)導(dǎo)航條時(shí)，主要分以下幾步：

第一步：首先在制作導(dǎo)航的列表(<ul class=”nav”>)基礎(chǔ)上添加類名“navbar-nav”

第二步：在列表外部添加一個(gè)容器（div），并且使用類名“navbar”和“navbar-default”

示例查看右側(cè)代碼編輯（10-19行）。

“.navbar”樣式的主要功能就是設(shè)置左右padding和圓角等效果，但他和顏色相關(guān)的樣式?jīng)]有進(jìn)行任何的設(shè)置。其主要源碼如下：

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

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

原理分析：

而導(dǎo)航條的顏色都是通過(guò)“.navbar-default”來(lái)進(jìn)行控制：

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

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

navbar-nav樣式是在導(dǎo)航.nav的基礎(chǔ)上重新調(diào)整了菜單項(xiàng)的浮動(dòng)與內(nèi)外邊距。同時(shí)也不包括顏色等樣式設(shè)置，源碼請(qǐng)查看bootstrap.css文件第3785行～第3830行，我們把代碼節(jié)選出來(lái)放入右側(cè)bootstrap.css中。

而顏色和其他樣式是通過(guò)配合父容器“navbar-default”來(lái)一起實(shí)現(xiàn)：

/*源碼請(qǐng)查看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;
}