使用Bootstrap可快速创建响应式导航栏，只需引入CSS和JS文件，利用navbar类构建基础结构，通过navbar-expand控制响应式行为，结合bg-dark等类定制样式，并用dropdown实现下拉菜单功能。
使用Bootstrap可以快速搭建美观且响应式的导航栏，无需从零编写CSS。只需引入Bootstrap框架，利用其预定义的类和结构，就能在几分钟内完成一个功能完整的导航栏。
引入Bootstrap
要在项目中使用Bootstrap组件，先确保已正确引入Bootstrap的CSS文件。可以通过CDN方式快速加载：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">同时，如果需要折叠菜单（如移动端汉堡菜单），还需引入Bootstrap的JavaScript文件及其依赖：
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
创建基本导航栏结构
Bootstrap使用 .navbar 类作为导航栏的基础。结合 .navbar-expand 系列类可控制导航栏在不同屏幕尺寸下的展开行为。
立即学习“前端免费学习笔记（深入）”；
以下是一个包含品牌标志、导航链接和响应式折叠菜单的基本示例：
<nav class="navbar navbar-expand-lg navbar-light bg-light"><div class="container-fluid">
<a class="navbar-brand" href="#">我的网站</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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" href="#">联系</a>
</li>
</ul>
</div>
</div>
</nav>
自定义样式与颜色
Bootstrap提供了多种背景颜色类，例如 .bg-dark、.bg-primary 等，可快速改变导航栏外观。
若想创建一个深色主题导航栏，将 navbar-light bg-light 替换为 navbar-dark bg-dark：
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">此时导航链接会自动变为浅色，确保文字清晰可见。
添加下拉菜单
Bootstrap支持在导航栏中嵌入下拉菜单。使用 .dropdown 类及相关属性即可实现。
示例：在“服务”项中添加下拉菜单
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
服务
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<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>
基本上就这些。通过组合Bootstrap提供的类名和HTML结构，你可以快速构建出功能完整、适配移动端的导航栏，节省大量开发时间。关键是理解各个类的作用并合理组织DOM结构。
