Bootstrap是一个流行的前端框架，可提供预设的CSS和JavaScript组件，以创建响应迅速和移动优先的网页。任何网站的关键组成部分之一是导航栏，该栏可轻松访问网站的不同部分。
要使用Bootstrap 4创建导航栏，请按照以下步骤：
1 .. 包括Bootstrap CSS和JavaScript文件：您需要在HTML文件中包含Bootstrap CSS和JavaScript文件。您可以通过在HTML文件的
部分中添加以下代码来执行此操作：<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
2 .. 为导航栏创建HTML结构：下一步是为导航栏创建HTML结构。您可以使用Bootstrap的内置CSS课程来设置导航栏。这是基本导航栏结构的示例：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</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 ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
3 .. 添加用于样式的CSS类：Bootstrap提供了各种CSS类，您可以用这些类型来设置导航栏。例如，您可以使用Navbar类来定义导航栏的主要容器，以及Navbar-Light和BG-Light类来指定导航栏的轻背景颜色。您还可以使用Navbar-Brand类来样式徽标，以及Navbar-Toggler类为移动设备创建汉堡菜单图标。
4 .. 添加响应行为的JavaScript：Bootstrap的导航栏旨在响应迅速，这意味着它将根据屏幕大小自动调整其布局。要启用此行为，您需要添加步骤1中提到的Bootstrap的JavaScript文件。JavaScript文件包括导航栏的功能，例如移动设备的Coldapsible Hamburger菜单。
就是这样！通过这些步骤，您应该使用Bootstrap 4具有功能齐全的导航栏。您可以通过使用其他Bootstrap类并根据需要修改CSS进一步自定义导航栏的外观和行为。