Bootstrap - 导航栏：专业网页导航的门户

你好，未来的网页开发者们！今天，我们将深入现代网页设计最重要的组成部分之一：导航栏（navbar）。作为你友善的计算机老师，我很兴奋能带领你们进入Bootstrap导航栏的奇妙世界。所以，拿起你最喜欢的饮料，舒适地坐好，让我们一起开始这段编码冒险！

Bootstrap - Navbars

工作原理

在开始构建我们的导航栏之前，先来了解一下导航栏是什么以及它们是如何工作的。导航栏（navbar），简称导航条，就像是你的网站的地图。它帮助用户在你的数字作品中找到方向。在Bootstrap中，导航栏是响应式的，并且默认会折叠，这意味着它们可以完美地适应不同的屏幕尺寸。这难道不酷吗？

基本导航栏

让我们从一个基本的导航栏开始。以下是一个简单的例子：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">我的网站</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切换导航">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">首页 <span class="sr-only">(当前)</span></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" href="#">联系</a>
</li>
</ul>
</div>
</nav>

让我们分解一下：

我们从一个带有Bootstrap类的<nav>元素开始。
navbar-brand类用于你的网站名称或标志。
navbar-toggler用于移动视图，创建著名的“汉堡”菜单。
在navbar-collapse的div内部，我们有我们的导航项在一个无序列表中。

垂直导航栏

想要来点新意吗？让我们尝试一个垂直的导航栏：

<nav class="navbar navbar-light bg-light flex-column">
<a class="navbar-brand" href="#">垂直导航</a>
<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" href="#">联系</a>
</nav>
</nav>

这里的魔法在于flex-column类。它将我们的水平导航栏变成了一个时尚的垂直导航栏。酷炫吧？

居中导航栏

对于那些喜欢一切对齐的人来说，这里是如何将导航栏项居中的方法：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="navbar-nav mx-auto">
<a class="nav-item nav-link active" href="#">首页</a>
<a class="nav-item nav-link" href="#">关于</a>
<a class="nav-item nav-link" href="#">服务</a>
<a class="nav-item nav-link" href="#">联系</a>
</div>
</nav>

在这里，mx-auto类是我们的居中超级英雄。它在两边应用自动边距，从而居中我们的内容。

品牌

你的品牌就是你的身份。让我们看看如何让它发光：

<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/path/to/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
</nav>

这段代码在品牌名称旁边添加了一个标志。d-inline-block和align-top类确保所有内容对齐得很好。

文本

有时，你只需要在导航栏中添加一些普通文本：

<nav class="navbar navbar-light bg-light">
<span class="navbar-text">
导航栏中的内联元素文本
</span>
</nav>

navbar-text类将你的文本样式化为与导航栏的外观相匹配。

图片和文本

让我们结合图片和文本，打造一个更动态的导航栏：

<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/path/to/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
<span class="navbar-text">
欢迎访问我们的网站！
</span>
</nav>

这创建了一个带有标志和欢迎信息的导航栏。看起来很专业吧？

导航组件

nav组件是我们导航栏的心脏。让我们看一个更复杂的例子：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">导航栏</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切换导航">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">首页 <span class="sr-only">(当前)</span></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="#" tabindex="-1" aria-disabled="true">禁用</a>
</li>
</ul>
</div>
</nav>

这个例子包含了一个活动链接、常规链接和一个禁用链接。sr-only类是为屏幕阅读器设计的，提高了可访问性。

无列表导航栏

为了更干净的外观，你可以创建一个没有列表的导航栏：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">导航栏</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">首页</a>
<a class="nav-item nav-link" href="#">功能</a>
<a class="nav-item nav-link" href="#">定价</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">禁用</a>
</div>
</nav>

这在不使用<ul>和<li>标签的情况下实现了相同的结果。

带下拉菜单的导航栏

准备好升级了吗？让我们给导航栏添加一个下拉菜单：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">导航栏</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">首页</a>
<a class="nav-item nav-link" href="#">链接</a>
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
下拉链接
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">操作</a>
<a class="dropdown-item" href="#">另一个操作</a>
<a class="dropdown-item" href="#">在这里的其他内容</a>
</div>
</div>
</div>
</nav>

dropdown-toggle类创建下拉效果，而dropdown-menu和dropdown-item类则用于样式化下拉内容。

表单

需要一个搜索栏？没问题！以下是如何在导航栏中添加表单的方法：

<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="搜索">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
</form>
</nav>

form-inline类使我们的表单元素保持在一行中，非常适合导航栏。

颜色方案

Bootstrap提供了多种颜色方案。以下是一个深色导航栏：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">深色导航栏</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">首页</a>
<a class="nav-item nav-link" href="#">功能</a>
<a class="nav-item nav-link" href="#">定价</a>
</div>
</nav>

只需将navbar-light改为navbar-dark，将bg-light改为bg-dark。很简单！

容器

为了更好的对齐，你可以将导航栏内容包裹在容器中：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">包含导航栏</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">首页</a>
<a class="nav-item nav-link" href="#">功能</a>
<a class="nav-item nav-link" href="#">定价</a>
</div>
</div>
</nav>

container类使内容居中并提供响应式固定宽度。

位置

固定顶部

想让导航栏固定在顶部吗？以下是如何做到的：

<nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">固定顶部</a>
</nav>

fixed-top类使你的导航栏在用户滚动时保持在页面顶部。

响应式行为

Bootstrap导航栏默认是响应式的。它们在小屏幕上折叠，在大屏幕上展开。关键在于navbar-expand-*类：

<nav class="navbar navbar-expand-md navbar-light bg-light">
<!-- 导航栏内容 -->
</nav>

这个导航栏将在中等尺寸屏幕和更大尺寸上展开。

切换器

导航栏切换器是创建移动设备上“汉堡”菜单的东西：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">导航栏</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切换导航">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<!-- 导航栏内容 -->
</div>
</nav>

navbar-toggler按钮控制小屏幕上导航栏内容的可见性。

外部内容

你也可以切换导航栏之外的内容：

<nav class="navbar navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="切换导航">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">折叠内容</h5>
<span class="text-muted">通过导航栏品牌切换。</span>
</div>
</div>

这创建了一个切换器，控制导航栏之外的内容。

侧边栏

最后，让我们看看侧边栏导航栏：

<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">侧边栏</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="关闭"></button>
</div>
<div class="offcanvas-body">
<!-- 侧边栏内容 -->
</div>
</div>
</div>
</nav>

这创建了一个从屏幕侧面滑入的侧边栏，非常适合移动导航。

就这样，伙计们！我们一起穿越了Bootstrap导航栏的世界，从基本结构到高级功能。记住，熟能生巧，所以不要害怕尝试这些例子。快乐编码，愿你的导航栏永远引导用户走向正确的方向！

Credits: Image by storyset