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 的标准写法是：
注意三点：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更可靠
典型结构：
立即学习“前端免费学习笔记（深入）”；
自定义折叠菜单时，aria-expanded 和 aria-controls 不能省
很多开发者只关注视觉折叠，忽略可访问性。当用 JS 切换菜单显隐时，必须同步更新这两个属性，否则屏幕阅读器无法识别状态变化：
- 触发按钮需有
aria-expanded="false"（初始）或"true"（展开后） - 触发按钮的
aria-controls必须指向目标容器的id（如aria-controls="mobile-menu"→
