Bootstrap - 导航栏示例

导航栏是什么？

你好，有抱负的网页开发者们！今天，我们将深入了解Bootstrap导航栏的精彩世界，或者我们喜欢称之为“导航条”。想象一下你正在建造一栋房子 - 导航栏就像是连接所有房间的走廊。它是帮助访问者轻松浏览你的网站的中心枢纽。

Bootstrap - Navigation Demo

导航栏是一个强大的导航组件，位于你的网页顶部，提供指向网站不同部分或页面的链接。它就像是访问者的路线图，引导他们穿越你的数字景观。

为什么使用Bootstrap来创建导航栏？

Bootstrap，我的朋友们，就像是网页开发者的超级英雄工具包。它包含了预先设计的组件，让我们的生活变得更简单。使用Bootstrap来创建导航栏意味着：

在不同设备上保持一致性（响应式设计）
容易定制
内置对各种导航模式的支持

现在，让我们卷起袖子开始建造吧！

基本导航栏结构

以下是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>
</ul>
</div>
</nav>

让我们分解一下：

<nav class="navbar navbar-expand-lg navbar-light bg-light">：这是我们主要的导航栏容器。这些类定义了它的外观和行为。
<a class="navbar-brand" href="#">：这里放置你的品牌名称或标志。
<button class="navbar-toggler">：这个按钮在小屏幕上出现，用于切换导航栏。
<div class="collapse navbar-collapse">：这个容器包含在较小屏幕上会折叠的导航项。
<ul class="navbar-nav">：这个无序列表包含我们的导航项。
<li class="nav-item">：每个列表项代表一个导航项。

定制你的导航栏

更改颜色

Bootstrap提供了多种颜色方案。让我们尝试一个深色导航栏：

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

在这里，我们将navbar-light bg-light改为navbar-dark bg-dark。这就好比给你的导航栏一个时尚的夜间外观！

添加搜索表单

想要添加搜索功能？这样做：

<form class="form-inline my-2 my-lg-0">
<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>

将这个代码块添加到你的navbar-collapse容器内。这就好比在导航走廊中添加了一个放大镜！

下拉菜单

让我们给导航栏添加一些活力，来一个下拉菜单：

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
下拉菜单
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">操作</a>
<a class="dropdown-item" href="#">另一个操作</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">这里还有其他东西</a>
</div>
</li>

这将在你的导航栏中创建一个下拉菜单。这就好比在导航走廊中添加了一个秘密房间！

响应式行为

Bootstrap导航栏默认是响应式的。在小屏幕上，导航栏会折叠成一个切换按钮（通常称为“汉堡菜单”）。这确保了你的导航在所有设备上都可以使用。

要看到这个效果，尝试调整你的浏览器窗口大小。你会注意到导航项消失，切换按钮出现。点击这个按钮，导航项就会以下拉格式显示。

最佳实践

简洁明了：不要给用户太多的选项。
使用清晰的标签：确保你的导航项容易理解。
高亮显示当前页面：使用active类来告诉用户他们当前所在的位置。
考虑你的品牌：选择与整体设计相匹配的颜色和样式。

结论

恭喜你！你刚刚创建了你的第一个Bootstrap导航栏。记住，熟能生巧。尝试不同的组合，玩转颜色，最重要的是，享受乐趣！

以下是总结我们使用过的Bootstrap类的表格：

类	用途
navbar	定义主要的导航栏容器
navbar-expand-lg	设置导航栏扩展的断点
navbar-light/dark	设置导航栏的颜色方案
bg-light/dark	设置导航栏的背景颜色
navbar-brand	设置品牌/标志区域样式
navbar-toggler	创建小屏幕上的切换按钮
navbar-nav	设置导航项列表的样式
nav-item	设置单个导航项的样式
nav-link	设置导航项内链接的样式
dropdown-toggle	创建下拉切换
dropdown-menu	设置下拉菜单容器的样式
dropdown-item	设置下拉菜单内项目的样式

现在去创造惊人的导航栏吧！记住，每个伟大的网站都是从伟大的导航开始的。快乐编码！

Credits: Image by storyset