導航（基礎樣式）

<ul class="nav nav-tabs">
<li><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>

<ul class="nav nav-tabs">
<li class = "active"><a href="##">商品介紹</a></li>----------假設我們想讓“Home”項為當前選中項，只需要在其標簽上添加類名“class="active"”
<li><a href="##">規格參數</a></li>
<li><a href="##">商品評價</a></li>
<li class="disabled"><a href="##">售後保證</a></li>--------有的選項卡還帶有禁用狀態，實現這樣的效果，只需要在標簽項上添加“class="disabled"”即可
</ul>

導航（膠囊形(pills)導航）當前項高亮顯示，並帶有圓角效果。

<ul class="nav nav-pills">
<li class="active"><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li class="disabled"><a href="##">Responsive</a></li>
</ul>

導航（垂直堆疊的導航）

<ul class="nav nav-pills nav-stacked">
     <li class="active"><a href="##">Home</a></li>
     <li><a href="##">CSS3</a></li>
     <li><a href="##">Sass</a></li>
     <li><a href="##">jQuery</a></li>
     <li class="disabled"><a href="##">Responsive</a></li>
</ul>

自適應導航（使用）

<ul class="nav nav-tabs nav-justified">
     <li class="active"><a href="##">Home</a></li>
     <li><a href="##">CSS3</a></li>
     <li><a href="##">Sass</a></li>
     <li><a href="##">jQuery</a></li>
     <li><a href="##">Responsive</a></li>
</ul>

導航加下拉菜單（二級導航）

<ul class="nav nav-pills">
<li class="active"><a href="##">首頁</a></li>
<li class="dropdown">
<a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li class=”nav-divider”></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>
</li>
<li><a href="##">關於我們</a></li>

面包屑式導航

使用方式就很簡單，為ol加入breadcrumb類：

bootstrap學習筆記（六）導航