導航一般采用ul、li來定義，否則有些效果無法實現，比如動態選項卡效果。
基礎樣式：
1 <ul class="nav"> 2 <li class="nav-item"><a href="#" class="nav-link">導航一</a></li> 3 </ul>
導航樣式及屬性：
| ul 標簽可用樣式及屬性 | |
| .nav | 導航基類 |
| .nav-tabs | 選項卡導航 |
| .nav-pills | 膠囊導航 |
| .nav-justified | 導航均分寬度 |
| .flex-column | 垂直導航 |
| .justify-content-start | .justify-content-center | .justify-content-end | 導航選項的對齊方式： .justify-content-start 默認，左對齊 .justify-content-center 居中對齊 .justify-content-right 右對齊 |
| li 標簽可用樣式及屬性 | |
| .nav-item | 指定一個選項 |
| .dropdown | 指明該選項是一個下拉菜單（下拉菜單也可以不用指定） |
| a標簽可用樣式及屬性 | |
| .nav-link | 指定導航鏈接 |
| .active | 當前激活的導航鏈接 |
| .disabled | 禁用的導航鏈接 |
| data-toggle = "{tab | pill }" | 定義一個動態選項卡 或 動態膠囊選項卡 |
| href = "#id" | 動態導航時，指明要顯示的容器ID |
| 動態選項卡容器樣式 | |
| .tab-pane | 動態選項卡容器類，必須要加 |
動態下拉選項卡示例：
1 <div class="container"> 2 <h3>定義動態下拉選項卡</h3> 3 <ul class="nav nav-tabs" role="tablist"> 4 <li class="nav-item"><a href="#con1" class="nav-link active" data-toggle="tab">選項一</a></li> 5 <li class="nav-item dropdown"> 6 <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">下拉選項</a> 7 <div class="dropdown-menu"> 8 <a href="#" class="dropdown-item">下拉一</a> 9 <a href="#" class="dropdown-item">下拉二</a> 10 </div> 11 </li> 12 <li class="nav-item"><a href="#con2" class="nav-link" data-toggle="tab">選項二</a></li> 13 <li class="nav-item"><a href="#con3" class="nav-link" data-toggle="tab">選項三</a></li> 14 <li class="nav-item"><a href="#" class="nav-link disabled">禁用選項</a></li> 15 </ul> 16 17 <div class="tab-content"> <!-- 這個類是必須的，否則異常 --> 18 <div id="con1" class="tab-pane active"> 19 選項一內容 20 </div> 21 <div id="con2" class="tab-pane fade"><!-- fade 必須加 --> 22 選項二內容 23 </div> 24 <div id="con3" class="tab-pane fade"><!-- fade 必須加 --> 25 選項三內容 26 </div> 27 </div> 28 </div>
注意：
一）選項卡標簽對應內容需注意事項：
a) 要放置在類：tab-content 的容器下，這是必需的，否則會出現異常。
b）必須添加 .tab-pane 類
c) 用.active表明當前選項卡內容。其它一定要加載 .fade 類。