導(dǎo)航對(duì)于一位前端人員來說并不陌生。可以說導(dǎo)航是一個(gè)網(wǎng)站重要的元素組件之一，可以便于用戶查找網(wǎng)站所提供的各項(xiàng)功能服務(wù)。導(dǎo)航的制作方法也是千奇百怪，五花八門。在這一節(jié)中將向大家介紹如何使用Bootstrap框架制作各式各樣的導(dǎo)航。

在Bootstrap框架將導(dǎo)航獨(dú)立出來成為一個(gè)導(dǎo)航組件，根據(jù)不同的版本，可以找到對(duì)應(yīng)的源碼：

   ? LESS版本：對(duì)應(yīng)的源文件是navs.less

   ? Sass版本：對(duì)應(yīng)的源文件是_navs.scss

   ? 編譯后版本：對(duì)應(yīng)源碼是bootstrap.css文件第3450行～第3641行

導(dǎo)航基礎(chǔ)樣式

Bootstrap框架中制作導(dǎo)航條主要通過“.nav”樣式。默認(rèn)的“.nav”樣式不提供默認(rèn)的導(dǎo)航樣式，必須附加另外一個(gè)樣式才會(huì)有效，比如“nav-tabs”、“nav-pills”之類。比如右側(cè)代碼編輯器中就有一個(gè)tab導(dǎo)航條的例子，他的實(shí)現(xiàn)方法就是為ul標(biāo)簽加入.nav和nav-tabs兩個(gè)類樣式。

/*源碼請查閱bootstrap.css文件第3450行~第3493行*/

.nav {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.nav> li {
  position: relative;
  display: block;
}
.nav> li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}
.nav> li >a:hover,
.nav> li >a:focus {
  text-decoration: none;
  background-color: #eee;
}
.nav>li.disabled> a {
  color: #999;
}
.nav>li.disabled>a:hover,
.nav>li.disabled>a:focus {
  color: #999;
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
}
.nav .open > a,
.nav .open >a:hover,
.nav .open >a:focus {
  background-color: #eee;
  border-color: #428bca;
}
.nav .nav-divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.nav> li > a >img {
  max-width: none;
}