站长百科 | 数字化技能提升教程 数字化时代生存宝典 
Bootstrap 提供了一组共享常规标记和样式的导航组件，从基础的 .nav 类到活动和禁用状态。通过交换修改器类，可以在各个样式之间进行切换。
Nav 组件使用 FlexBox 构建，为构建各种类型的导航组件提供了坚实的基础。它包括一些样式覆盖（用于处理列表）、一些链接填充（用于较大的命中区域）和基本的禁用样式。
一、基础导航
基础导航组件不包括任何.active状态。下面的例子包括这个类，主要是为了证明这个特定的类不会触发任何特殊的样式。
要将活动状态传递给辅助技术，请使用aria-current属性-使用当前页面的页面值，或使用集合中当前项的true。
<ul class="nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul>
class可以使用在很多地方，因此标记可以超级灵活。如果项目的顺序很重要，可以使用与ul类似的ol，或者使用nav元素。因为.nav使用display: flex，因此nav-link与nav-item的行为一样，却不需要有额外的标记。
<nav class="nav"> <a class="nav-link active" aria-current="page" href="#">Active</a> <a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </nav>
二、可用样式
使用修饰符、通用类别更改.nav元件的样式。依据需要混合搭配或自行建立。
三、水平对齐
使用flexbox通用类别更改导航的水平对齐方式。预设情况下导航会向左对齐，但可以轻松地将其更改为向中心或向右对齐。
使用.justify-content-center置中对齐：
<ul class="nav justify-content-center"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul>
使用.justify-content-end靠右对齐：
<ul class="nav justify-content-end"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul>
四、垂直
通过使用.flex-column通用类别更改flex的轴线方向以堆叠导航。如果只希望在特定的viewports下堆叠，可使用响应式版本（例如.flex-sm-column）。
<ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul>
像往常一样，垂直导航也可以不用ul。
<nav class="nav flex-column"> <a class="nav-link active" aria-current="page" href="#">Active</a> <a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </nav>
五、选项卡
使用基本的导航，并加入.nav-tabs以生成具有分页标签的界面。透过我们的分页JavaScript插件来创造可切换的块。
<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul>
六、胶囊
使用相同的HTML，但使用.nav-pills取代：
<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul>
七、填充并对齐
.nav内容有两种宽度扩展用的Class，使用.nav-fill会将.nav-item内容按照比例分配空间。注意，这会占用所有的水平空间，但并不是每个导航项目都具有相同宽度。
<ul class="nav nav-pills nav-fill"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Much longer nav link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul>
当使用nav导航时，可以忽略.nav-item，因为客制化a元素的样式仅需要.nav-link。
<nav class="nav nav-pills nav-fill"> <a class="nav-link active" aria-current="page" href="#">Active</a> <a class="nav-link" href="#">Much longer nav link</a> <a class="nav-link" href="#">Link</a> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </nav>
创建等宽元素请使用.nav-justified。所有的水平空间将被导航连接占据，但与上面的.nav-fill不同，每个导航项都将是相同的宽度。
<ul class="nav nav-pills nav-justified"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Much longer nav link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul>
与使用nav导航中的.nav-fill示例类似。
<nav class="nav nav-pills nav-justified"> <a class="nav-link active" aria-current="page" href="#">Active</a> <a class="nav-link" href="#">Much longer nav link</a> <a class="nav-link" href="#">Link</a> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </nav>
八、flex实用程序
如果需要响应式的导航变化，请使用一系列flexbox通用类别。这些通用类别在断点之间提供更多的自定义设定。在下面的示例中，我们的导航将在最小断点以下堆叠，并从small断点开始采用水平排版以填满所有可用宽度。
<nav class="nav nav-pills flex-column flex-sm-row"> <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a> <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a> <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a> <a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </nav>
九、可访问性
如果是将导航当作导航条使用，那么请务必确保在符合逻辑的ul之父容器上加入role=“navigation”，或使用nav元素包装整个导航条。不要在ul本身添加role，因为这样做将会阻止辅助技术将其声明为列表。
请注意，即使导航条的视觉样式透过.nav-tabs而呈现为分页标签，也应该不会被赋予role=“tablist”，role=“tab”或role=“tabpanel”属性。这些仅适用于动态分页标签界面，如WAI ARIA Authoring Practices中描述。相关示例，请参阅本节中的JavaScript behavior。在动态选项界面上不需要aria-current属性，因为我们的JavaScript透过在活动页签上添加aria-selected=“true”来处理标明状态。
十、下拉列表
加入额外的HTML和下拉菜单JavaScript插件。
1、带下拉列表的选项卡
<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Separated link</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul>
2、带下拉列表的胶囊
<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">Separated link</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul>
十一、JavaScript行为
使用JavaScript分页标签插件，单独或透过编译的bootstrap.js档，扩展我们的导航分页标签和胶囊状分页，以创建可选的分页标签、甚至是下拉菜单。
态页签界面，如WAI ARIA Authoring Practices所描述，需要role=“tablist”、role=“tab”，role=“tabpanel”和附加的aria-属性，向用户提供辅助技术（如屏幕阅读器）的结构、功能和当前状态。
注意：动态页签应该不包含下拉菜单，因为这会导致可用性和亲和性问题。从可用性的角度来看，当前显示的选项卡的触发器元素不会立即显示（因为它在关闭的下拉菜单中）可能会导致混淆。从亲和性的角度来看，目前还没有明确的方式将这种结构对应到标准的WAI ARIA模式，这意味着不能容易地被用户的辅助技术所理解。
<ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div> </div>
为了满足需求，它可以与基于ul的标签（如上所示）一起使用，也可以与任意“roll your own”标记一起使用。请注意，如果使用的是nav，则不应直接向其中添加role=“tablist”，因为这会复写该元素原生的role。取而代之的是，切换到其他元素（在下面的示例中为简单的div），然后用nav包装起来。
<nav> <div class="nav nav-tabs" id="nav-tab" role="tablist"> <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button> <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button> <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button> </div> </nav> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div> <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div> <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div> </div>
标签分页插件也能使用于胶囊状页签。
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button> </li> </ul> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div> <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div> </div>
还有搭配垂直胶囊状页签。
<div class="d-flex align-items-start"> <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical"> <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button> <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button> <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button> <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button> </div> <div class="tab-content" id="v-pills-tabContent"> <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div> <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div> <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div> <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div> </div> </div>
1、使用数据属性
只需在元素上指定data-bs-toggle=“tab”或data-bs-toggle=“pill”即可启动标签或胶囊状导航，而无需编写任何JavaScript。可在.nav-tabs或.nav-pills上使用这些数据属性
<!-- Nav tabs --> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button> </li> </ul> <!-- Tab panes --> <div class="tab-content">
2、通过JavaScript
透过JavaScript启用分页标签（每一个分页标签需要分别启动）：
var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})
启用分页标签有以下数种方法：
var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
3、淡入效果
要使分页标签淡入淡出，请将.fade加到每个.tab-pane中。第一个分页内容还必须具有.show以使初始内容可见。
<div class="tab-content"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div> <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div> </div>
4、方法
构造：
启动分页标签元素和内容容器。标签应该有一个data-bs-target或href定位在DOM中的一个容器节点。
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
<script>
var firstTabEl = document.querySelector('#myTab li:last-child a')
var firstTab = new bootstrap.Tab(firstTabEl)
firstTab.show()
</script>
显示：
选择给定的分页标签并显示其关联的分页内容。之前选择的任何其他分页标签将被取消，并且其关联的内容被隐藏。在Tab内容实际显示之前返回到调用者（即在shown.bs.tab事件发生之前）。
var someTabTriggerEl = document.querySelector('#someTabTrigger')
var tab = new bootstrap.Tab(someTabTriggerEl)
tab.show()
销毁：
销毁一个元素的分页标签。
实例：
Static方法，该方法使可以获取与DOM元素关联的选项实例
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instan
十二、事件
显示新标签时，事件将按以下顺序触发：
- hide.bs.tab（当前活动的分页标签上）
- show.bs.tab （待显示的分页标签上）
- hidden.bs.tab （在上一个启动的分页标签上，与hide.bs.tab事件相同）
- shown.bs.tab（在刚刚显示的新分页标签上，与show.bs.tab事件相同）
如果没有分页标签已经被启动，那么hide.bs.tab和hidden.bs.tab事件不会被触发。
var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})
