【Bootstrap V4系列】学习入门教程之 组件-导航（Navs）高级用法

导航（Navs）高级用法

一、Regarding accessibility 关于可访问性

如果你使用导航来提供导航栏，一定要在<ul>的最合乎逻辑的父容器中添加一个role=“navigation”，或者在整个导航周围包裹一个<nav>元素。不要将角色添加到<ul>本身，因为这会阻止辅助技术将其作为实际列表公布。

请注意，即使导航栏在视觉上被设置为具有.nav-tabs类的选项卡，也不应赋予role=“tablist”、role=“tab”或role=“tabpanel”属性。这些仅适用于动态选项卡式界面，如ARIA创作实践指南选项卡模式中所述。有关示例，请参阅本节中动态选项卡式界面的JavaScript行为。

二、Using dropdowns 使用下拉菜单

添加带有一点额外HTML和下拉菜单JavaScript插件的下拉菜单。

2.1 Tabs with dropdowns 带有下拉菜单的标签

<ul class="nav nav-tabs"><li class="nav-item"><a class="nav-link active" href="#">Active</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a><div class="dropdown-menu"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">Separated link</a></div></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled">Disabled</a></li>
</ul>

页面展示效果：

2.2 Pills with dropdowns 带有下拉菜单的胶囊

<ul class="nav nav-pills">...
</ul>

页面展示效果：

三、JavaScript behavior JavaScript行为

如ARIA创作实践指南选项卡模式所述，动态选项卡式界面需要role=“tablist”、role=“tab”、role=“tabpanel”和其他ARIA属性，以便向辅助技术（如屏幕阅读器）的用户传达其结构、功能和当前状态。作为最佳实践，我们建议为选项卡使用<button>元素，因为这些是触发动态更改的控件，而不是导航到新页面或位置的链接。

请注意，选项卡JavaScript插件不支持包含下拉菜单的选项卡式界面，因为这会导致可用性和可访问性问题。从可用性的角度来看，当前显示的选项卡的触发元素不是立即可见的（因为它在关闭的下拉菜单中），这可能会导致混淆。

<ul class="nav nav-tabs" id="myTab" role="tablist"><li class="nav-item" role="presentation"><button class="nav-link active" id="home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>

动态选项卡式界面，页面展示效果1:

动态选项卡式界面，页面展示效果2:

为了帮助满足您的需求，这适用于基于<ul>的标记，如上所示，也适用于任何任意的“自己滚动”标记。请注意，如果你使用的是<nav>，你不应该直接向它添加role=“tablist”，因为这会覆盖元素作为导航地标的原生角色。相反，切换到一个替代元素（在下面的例子中，一个简单的<div>），并将<nav>包裹在它周围。

<nav><div class="nav nav-tabs" id="nav-tab" role="tablist"><button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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>

页面展示效果1:

页面展示效果2:

还有垂直胶囊。

<div class="row"><div class="col-3"><div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"><button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button></div></div><div class="col-9"><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>
</div>

页面展示效果1:

页面展示效果2: