Bootstrap - 导航和标签页

简介

你好，有抱负的网页开发者们！今天，我们将深入探讨网页设计中最为常用的组件之一：导航菜单和标签页。这些元素就像是网站的指示牌，引导用户到达不同的部分和内容。使用Bootstrap的导航和标签页组件，我们可以创建出时尚、响应式的导航系统，适用于所有设备。那么，让我们卷起袖子开始编码吧！

基础导航

让我们从基础开始。Bootstrap提供了一种简单的方式来使用.nav类创建导航菜单。以下是一个基本示例：

<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">关于</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">服务</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">联系</a>
</li>
</ul>

这段代码创建了一个水平导航链接列表。active类突出显示当前页面，而disabled类将不可点击的链接变为灰色。

可用样式

Bootstrap为导航提供了多种样式。让我们来看两个流行的样式：

标签页样式

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">个人资料</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">消息</a>
</li>
</ul>

这创建了一个标签页导航菜单，非常适合将内容组织成不同的部分。

药丸样式

<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">个人资料</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">消息</a>
</li>
</ul>

药丸样式为导航链接提供了更像是按钮的外观。

水平对齐

您可以轻松更改导航项的对齐方式。以下是如何操作：

<ul class="nav justify-content-center">
<!-- 导航项在此 -->
</ul>

<ul class="nav justify-content-end">
<!-- 导航项在此 -->
</ul>

justify-content-center类将导航项居中，而justify-content-end类将它们对齐到右侧。

使用Flex工具

Bootstrap的Flex工具为您提供了更多对导航布局的控制：

<nav class="nav flex-column">
<a class="nav-link active" href="#">激活</a>
<a class="nav-link" href="#">链接</a>
<a class="nav-link" href="#">链接</a>
<a class="nav-link disabled" href="#">禁用</a>
</nav>

这创建了一个垂直导航菜单，使用了flex-column类。

关于可访问性

在构建导航时，考虑可访问性至关重要。在适当的位置使用<nav>元素，并为活动项添加aria-current="page"：

<nav class="nav">
<a class="nav-link active" aria-current="page" href="#">激活</a>
<!-- 其他导航项 -->
</nav>

使用下拉菜单

导航可以包括下拉菜单，以构建更复杂的导航结构：

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">激活</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">下拉</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">操作</a></li>
<li><a class="dropdown-item" href="#">另一个操作</a></li>
<li><a class="dropdown-item" href="#">在这里的其他内容</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">分隔链接</a></li>
</ul>
</li>
<!-- 其他导航项 -->
</ul>

这段代码创建了一个带有下拉菜单的导航。

带有下拉菜单的标签页

您还可以在标签页样式的导航中包含下拉菜单：

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">激活</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">下拉</a>
<ul class="dropdown-menu">
<!-- 下拉项 -->
</ul>
</li>
<!-- 其他导航项 -->
</ul>

带有下拉菜单的药丸样式

同样的原则适用于药丸样式的导航：

<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">激活</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">下拉</a>
<ul class="dropdown-menu">
<!-- 下拉项 -->
</ul>
</li>
<!-- 其他导航项 -->
</ul>

JavaScript行为

Bootstrap的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-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">首页</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">个人资料</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>

这段代码创建了一组标签页，点击时显示不同的内容窗格。

可访问性

为了使您的标签页可访问，请使用role、aria-controls、aria-selected和aria-labelledby属性，如前一个示例所示。

使用数据属性

数据属性允许您在不编写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-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">首页</button>
</li>
<!-- 其他标签按钮 -->
</ul>

data-bs-toggle="tab"和data-bs-target="#home"属性在不编写额外JavaScript的情况下启用标签功能。

通过JavaScript

您还可以通过JavaScript激活标签页：

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)

triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})

这段代码为每个标签按钮添加了点击事件监听器，点击时激活相应的标签。

淡入效果

要为您的标签页添加淡入效果，请使用fade类：

<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>

这会在切换标签时创建一个平滑的过渡效果。

就是这样！您刚刚学习了如何使用Bootstrap创建和自定义导航菜单和标签页。记住，熟能生巧，所以尝试在您自己的项目中实验这些组件。祝您编码愉快！

Credits: Image by storyset