bootstrap学习笔记 - 导航、选项卡(nav)

导航或选项卡一般采用ul、li来定义，否则有些效果无法实现，比如动态选项卡效果，其基础样式：

<ul class="nav">
    <li class="nav-item"><a href="#" class="nav-link">导航一</a></li>
</ul>

ul 标签可用样式：

ul可用样	描述
.nav	导航基类
.nav-tabs	选项卡导航
.nav-pills	胶囊导航
.nav-justified	导航均分宽度
.flex-column	垂直导航
.justify-content-start \| .justify-content-center \| .justify-content-end	分别是默认左对齐、居中对齐、右对齐

li 标签可用样式及属性

li 标签可用样式	描述
.nav-item	指定一个选项
.dropdown	指明该选项是一个下拉菜单（下拉菜单也可以不用指定）

a 标签可用样式及属性

a 标签可用样式	描述
.nav-link	指定导航链接
.active	当前激活的导航链接
.disabled	禁用的导航链接
data-toggle = "{tab \| pill }"	定义一个动态选项卡或动态胶囊选项卡
href = "#id"	动态导航时，指明要显示的容器ID

动态选项卡容器样式

.tab-pane	动态选项卡容器类，必须要加

动态下拉选项卡示例：

<div class="container">
    <h3>定义动态下拉选项卡</h3>
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item"><a href="#con1" class="nav-link active" data-toggle="tab">选项一</a></li>
        <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">下拉选项</a>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">下拉一</a>
                <a href="#" class="dropdown-item">下拉二</a>
            </div>
        </li>
        <li class="nav-item"><a href="#con2" class="nav-link" data-toggle="tab">选项二</a></li>
        <li class="nav-item"><a href="#con3" class="nav-link" data-toggle="tab">选项三</a></li>
        <li class="nav-item"><a href="#" class="nav-link disabled">禁用选项</a></li>
    </ul>   
    <div class="tab-content"> <!-- 这个类是必须的，否则异常 -->     
        <div id="con1" class="tab-pane active">
            选项一内容
        </div>
        <div id="con2" class="tab-pane fade"><!-- fade 必须加 -->
            选项二内容
        </div>
        <div id="con3" class="tab-pane fade"><!-- fade 必须加 -->
            选项三内容
        </div>
    </div>
</div>

选项卡标签对应内容需注意事项：

要放置在类：tab-content 的容器下，这是必需的，否则会出现异常。
必须添加 .tab-pane 类。
用.active表明当前选项卡内容，其它一定要加载 .fade 类。