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

你好，未来的网页开发者们！今天，我们将深入现代网页设计的最重要的组件之一：导航栏（navbar）。作为你友好的计算机老师，我很高兴能引导你们进入Bootstrap导航栏的精彩世界。所以，拿起你最喜欢的饮料，舒服地坐下来，让我们一起踏上这个编码冒险之旅！

Bootstrap - Navbars

工作原理

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

基本导航栏

让我们从一个基本的导航栏开始。这里有一个简单的例子：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">MyWebsite</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<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="Toggle navigation">
<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导航栏的土地，从基本结构到高级特性。记住，熟能生巧，所以不要害怕尝试这些例子。快乐编码，愿你的导航栏永远引领用户走向正确的道路！

方法	描述
`.navbar()`	初始化导航栏组件
`.collapse('toggle')`	切换导航栏折叠
`.collapse('show')`	显示导航栏折叠
`.collapse('hide')`	隐藏导航栏折叠
`.offcanvas('toggle')`	切换侧边栏导航栏
`.offcanvas('show')`	显示侧边栏导航栏
`.offcanvas('hide')`	隐藏侧边栏导航栏

Credits: Image by storyset