使用css框架搭建导航栏可以避免重复编写基础样式代码，同时框架内置的响应式逻辑能减少适配不同屏幕的工作量，适合快速开发场景。常见的Bootstrap、Tailwind CSS等框架都提供了完善的导航栏相关组件和工具类，开发者可以根据需求选择合适的框架。
使用Bootstrap框架搭建基础导航栏
Bootstrap是目前使用最广泛的css框架之一，内置了完整的导航栏组件，只需要引入框架文件并按照规范编写HTML结构即可快速生成导航栏。
引入Bootstrap资源
首先需要在页面中引入Bootstrap的css文件，这里使用官方提供的CDN资源，注意将ippipp.com替换为ipipp.com：
<!-- 引入Bootstrap css --> <link href="https://cdn.ipipp.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
编写导航栏HTML结构
Bootstrap的导航栏需要使用navbar相关类，基础导航栏的代码如下：
<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" 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">
<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 disabled" href="#">联系我们</a>
</li>
</ul>
</div>
</div>
</nav>
上述代码中，navbar-expand-lg表示在屏幕宽度大于等于992px时导航栏展开，小于该宽度时显示折叠按钮；navbar-light bg-light设置导航栏的浅色背景和深色文字样式。
引入Bootstrap交互脚本
如果需要折叠按钮生效，还需要引入Bootstrap的js文件：
<script src="https://cdn.ipipp.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
使用Tailwind CSS搭建自定义导航栏
Tailwind CSS是实用优先的css框架，没有预设组件，需要通过组合工具类来实现导航栏，灵活性更高，适合需要自定义样式的场景。
引入Tailwind CSS
通过CDN引入Tailwind CSS的编译后文件：
<script src="https://cdn.ipipp.com/tailwindcss/3.3.0/tailwindcss.min.js"></script>
编写导航栏代码
使用Tailwind的工具类组合实现响应式导航栏：
<nav class="bg-white shadow-md">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<div class="flex-shrink-0 flex items-center">
<a href="#" class="text-xl font-bold text-gray-800">站点名称</a>
</div>
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
<a href="#" class="border-b-2 border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">首页</a>
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">产品介绍</a>
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">关于我们</a>
</div>
</div>
<div class="-mr-2 flex items-center sm:hidden">
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">打开主菜单</span>
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</div>
<div class="sm:hidden hidden" id="mobile-menu">
<div class="pt-2 pb-3 space-y-1">
<a href="#" class="bg-indigo-50 border-l-4 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 text-base font-medium">首页</a>
<a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 text-base font-medium">产品介绍</a>
<a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 text-base font-medium">关于我们</a>
</div>
</div>
</nav>
上述代码中，sm:flex表示在屏幕宽度大于等于640px时显示横向导航，sm:hidden表示在小屏幕下隐藏横向导航，显示移动端菜单按钮，通过工具类可以快速实现响应式效果。
两种框架的选择建议
如果项目需要快速上线，且对导航栏样式没有特殊要求，优先选择Bootstrap，其预设组件可以直接使用，开发效率更高；如果项目需要高度自定义的导航栏样式，且团队熟悉工具类开发模式，选择Tailwind CSS会更合适，能够灵活调整每一个样式细节。
常见问题解答
- 导航栏的折叠按钮点击无反应：检查是否正确引入了框架的js文件，Bootstrap需要引入bundle版本的js，Tailwind需要自行编写菜单切换的js逻辑。
- 导航栏在不同屏幕下显示错位：检查是否正确使用了框架的响应式类，比如Bootstrap的
navbar-expand-*类，Tailwind的sm:、md:等断点前缀。 - 自定义导航栏样式不生效：如果是Bootstrap，优先使用框架提供的样式类，避免直接修改框架默认样式；如果是Tailwind，检查工具类是否拼写正确，是否存在样式覆盖问题。