导航一般采用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 类。
原文：https://www.cnblogs.com/wm218/p/10863066.html