nav元素+预设类名是主流CSS框架实现导航栏的通用模式：Bootstrap需navbar基础类及expand断点控制，Tailwind用flex响应式工具链，必须添加aria-expanded/aria-controls保障可访问性，容器选container（居中留白）或container-fluid（通栏）需依设计稿而定。
用 nav 元素 + .navbar 类快速套用主流框架
几乎所有成熟 CSS 框架（Bootstrap、Tailwind、Bulma、Foundation）都把导航栏抽象为 nav 语义元素 + 预设类名组合。关键不是“怎么写 HTML”，而是“选对类名 + 套对结构”。比如 Bootstrap 5 的标准写法是：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">MyApp</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="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
注意三点：navbar 是必加基础类；navbar-expand-* 控制折叠断点（lg 表示 ≥992px 才展开）；container-fluid 或 container 决定内容是否居中且带内边距。
Tailwind 中不依赖组件库，纯 utility 类拼装
Tailwind 不提供 .navbar 这种封装类，但用响应式 + Flex 工具能更灵活控制。常见错误是直接复制 Bootstrap 结构却漏掉 flex 和断点逻辑：
-
sm:hidden用于默认隐藏移动端菜单按钮 -
md:flex让菜单在中屏以上显示为 flex 排列 -
justify-between替代navbar-brand和navbar-nav的左右分隔 -
space-x-6控制导航项间距，比手写margin-right更可靠
典型结构：
立即学习“前端免费学习笔记（深入）”；
<nav class="py-4 px-6 bg-white shadow-sm">
<div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
<a href="#" class="text-xl font-bold text-gray-800">Logo</a>
<div class="mt-4 md:mt-0 md:block">
<ul class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-6">
<li><a href="#" class="text-gray-600 hover:text-blue-600">Home</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600">Docs</a></li>
</ul>
</div>
</div>
</nav>
自定义折叠菜单时，aria-expanded 和 aria-controls 不能省
很多开发者只关注视觉折叠，忽略可访问性。当用 JS 切换菜单显隐时，必须同步更新这两个属性，否则屏幕阅读器无法识别状态变化：
- 触发按钮需有
aria-expanded="false"（初始）或"true"（展开后） - 触发按钮的
aria-controls必须指向目标容器的id（如aria-controls="mobile-menu"→<div id="mobile-menu">） - 目标容器需加
role="navigation"，并根据状态设置hidden或移除
否则 WCAG 会报错，且键盘用户无法操作。
布局容器选 container 还是 container-fluid？看设计稿留白需求
这是最常被忽略的细节：框架里 container 默认带 max-width 和左右 auto margin，适合内容居中、两侧留白；container-fluid 是 100% 宽度，适合通栏导航或全屏 Banner 下方的导航。误用会导致：
- 用
container-fluid做常规导航 → 菜单项贴满屏幕边缘，视觉压迫感强 - 用
container做顶部通栏 → 左右出现难看的空白条，和设计稿对不上 - 在移动端混用两者 → 断点处宽度跳变，动画卡顿
建议先确认 UI 设计稿中导航栏的宽度约束，再反向选容器类型。没有设计稿时，优先用 container —— 它更符合多数产品的阅读节奏。
