在bootstrap框架中將導航獨立出來成為一個導航組件，根據不同的版本，可以找到相應的源碼：
LESS: navs.less
SASS: _navs.scss
標簽形導航，也稱選項卡導航
標簽形導航是通過.nav-tabs樣式來實現的，在制作標簽形導航時需要在原導航類名為.nav的容器上追加類名.nav-tabs
<ul class="nav nav-tabs"> <li><a href="#">導航標題1</a></li> <li><a href="#">導航標題2</a></li> <li><a href="#">導航標題3</a></li> <li><a href="#">導航標題4</a></li> <li><a href="#">導航標題5</a></li> </ul>
原理：
將菜單項li按塊顯示，并讓它們排列在同一水平上，然后定義非高亮菜單的樣式和鼠標懸浮效果
.nav-tabs {border-bottom: 1px solid #ddd;}.nav-tabs > li {float: left;margin-bottom: -1px;}.nav-tabs > li > a {margin-right: 2px;line-height: 1.42857143;border: 1px solid transparent;border-radius: 4px 4px 0 0;}.nav-tabs > li >a:hover {border-color: #eee #eee #ddd;}一般情況下，選項卡都會有個當前選中項，只需要在其（li）標簽上添加類名.active即可
<ul class="nav nav-tabs"> <li class="active"><a href="#">導航標題1</a></li> <li><a href="#">導航標題2</a></li> <li><a href="#">導航標題3</a></li> <li><a href="#">導航標題4</a></li> <li><a href="#">導航標題5</a></li></ul>
.nav-tabs >li.active> a,.nav-tabs >li.active>a:hover,.nav-tabs >li.active>a:focus { color: #555; cursor: default; background-color: #fff; border: 1px solid #ddd; border-bottom-color: transparent;}除了當前選項外，有的選項卡還帶有禁用狀態，實現這樣的效果，只需在標簽項上添加類名disabled
.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;}如果要實現點擊菜單項就可以切換內容的效果，就需要配合js插件
膠囊形（pills）導航
當前高亮顯示，并帶圓角效果，其實現方法和選項卡導航類似，同樣的結構，只需將類名.nav-tabs換成類名.nav-pills
.nav-pills > li { float: left;}.nav-pills > li > a { border-radius: 4px;}.nav-pills > li + li { margin-left: 2px;}.nav-pills >li.active> a,.nav-pills >li.active>a:hover,.nav-pills >li.active>a:focus {color: #fff; background-color: #428bca;}垂直堆疊的導航
除了水平導航，還有垂直導航，制作垂直堆疊的導航只需在.nav-pills的基礎上追加類名.nav-stacked
與膠囊形導航相比，主要是讓導航項不浮動，讓其垂直排列，然后給相鄰導航項留有一定的間距
.nav-stacked > li { float: none;}.nav-stacked > li + li { margin-top: 2px; margin-left: 0;}<ul class="nav nav-pills nav-stacked"> <li><a href="#">導航標題0</a></li> <li class="active"><a href="#">導航標題1</a></li> <li><a href="#">導航標題2</a></li> <li><a href="#">導航標題3</a></li> <li><a href="#">導航標題4</a></li> <li class="disabled"><a href="#">導航標題5</a></li></ul>垂直堆疊導航像下拉菜單組與組間有一分割線一樣，導航項之間也有分割線這樣的效果，只需在導航項之間添加<li class=”divider”></li>
<ul class="nav nav-pills nav-stacked"> <li ><a href="#">導航標題0</a></li> <li class="active"><a href="#">導航標題1</a></li> <li><a href="#">導航標題2</a></li> <li class="nav-divider"></li> <li><a href="#">導航標題3</a></li> <li><a href="#">導航標題4</a></li> <li class="disabled"><a href="#">導航標題5</a></li> </ul>
.nav .nav-divider {height: 1px;margin: 9px 0;overflow: hidden;background-color: #e5e5e5;} 自適應導航
自適應導航指的是導航占據容器全部寬度，而且菜單項可以像表格的單元格一樣自適應寬度，自適應導航和之前提到的.btn-group-justified制作的自適應按鈕組件一樣，不過在制作自適應導航時類名.nav-justified需和.nav-tabs或.nav-pills配合一起使用
原理：
列表ul上設置寬度為100%，然后每個菜單項li設置了display：table-cell，讓列表模擬表格單元格的形式顯示；
.nav-justified { width: 100%;}.nav-justified > li { float: none;}.nav-justified > li > a { margin-bottom: 5px; text-align: center;}.nav-justified > .dropdown .dropdown-menu { top: auto; left: auto;}@media (min-width: 768px) { .nav-justified > li { display: table-cell; width: 1%; } .nav-justified > li > a { margin-bottom: 0; }}上面有一個媒體查詢條件：@media（min-width:768px）{……}表示自適應導航僅在瀏覽器視窗寬度大于768px才能按上面的風格顯示，但瀏覽器視窗寬度小于768px時，會按下圖的風格顯示
.nav-tabs和.nav-justified配合在一起使用，也就是自適應選項卡導航，瀏覽器視窗寬度小于768px時，在樣式上做了另外的處理
.nav-tabs.nav-justified { width: 100%; border-bottom: 0;}.nav-tabs.nav-justified > li { float: none;}.nav-tabs.nav-justified > li > a { margin-bottom: 5px; text-align: center;}.nav-tabs.nav-justified > .dropdown .dropdown-menu { top: auto; left: auto;}@media (min-width: 768px) { .nav-tabs.nav-justified > li { display: table-cell; width: 1%; }.nav-tabs.nav-justified > li > a { margin-bottom: 0; }}.nav-tabs.nav-justified > li > a { margin-right: 0; border-radius: 4px;}.nav-tabs.nav-justified > .active > a,.nav-tabs.nav-justified > .active >a:hover,.nav-tabs.nav-justified > .active >a:focus { border: 1px solid #ddd;}@media (min-width: 768px) { .nav-tabs.nav-justified > li > a { border-bottom: 1px solid #ddd; border-radius: 4px 4px 0 0; }.nav-tabs.nav-justified > .active > a,.nav-tabs.nav-justified > .active >a:hover,.nav-tabs.nav-justified > .active >a:focus { border-bottom-color: #fff; }}導航加下拉菜單（二級導航）
制做二級導航只需將li當做父容器，使用類名.dropdown，同時在li中嵌套另一個ul列表
<ul class="nav nav-tabs"> <li><a href="#">導航菜單1</a></li> <li><a href="#">導航菜單2</a></li> <li><a href="#">導航菜單3</a></li> <li><a href="#">導航菜單4</a></li> <li class="dropdown"> <a class="dropdown-toggle"data-toggle="dropdown"> 導航菜單5 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">下拉菜單1</a></li> <li><a href="#">下拉菜單2</a></li> <li><a href="#">下拉菜單3</a></li> <li><a href="#">下拉菜單4</a></li> </ul> </li> <li><a href="#">導航菜單6</a></li> </ul>
面包屑式導航
面包屑一般用于導航，主要的作用是告訴用戶現在所處頁面的位置，在bootstrap框架中面包屑也是一個獨立的模塊組件。
LESS: breadcrumbs.less
SASS:_breadcrumbs.scss
<ol class="breadcrumb"> <li><a href="#">首頁</a></li> <li><a href="#">我的書</a></li> <li class="active">圖解css</li> </ol>
.breadcrumb {padding: 8px 15px;margin-bottom: 20px;list-style: none;background-color: #f5f5f5;border-radius: 4px;}.breadcrumb> li {display: inline-block;}.breadcrumb> li + li:before {padding: 0 5px;color: #ccc;content: "http://00a0";}.breadcrumb> .active {color: #999;}上面使用li+li：before實現li與li之間的分隔符，這種方案在低版本ie不支持
如果大家還想深入學習，可以點擊這里進行學習，再為大家附兩個精彩的專題：Bootstrap學習教程Bootstrap實戰教程
以上就是本文的全部內容，希望對大家的學習有所幫助。
新聞熱點
疑難解答
