Bootstrap导航栏必须同时使用.navbar和.navbar-expand-*类才能实现响应式展开，缺一不可；需用.collapse.navbar-collapse包裹菜单项，汉堡按钮须配data-bs-toggle="collapse"及正确href指向ID；链接须用.nav-link而非普通或.btn；颜色适配应通过.navbar-dark/.navbar-light类而非内联样式。
导航栏结构必须用 .navbar + .navbar-expand-* 才能响应式展开
Bootstrap 的导航栏不是随便套个 <nav></nav> 就能自动响应的。核心是两个类缺一不可：.navbar 提供基础样式和间距，.navbar-expand-*（如 .navbar-expand-md）控制在哪一断点开始水平展开。没加 expand 类，小屏下菜单永远折叠、按钮不出现，且点击无反应——这不是 JS 问题，是 CSS 媒体查询没生效。
常见错误：只写 <nav class="navbar"></nav>，结果手机上看只剩一个空条，汉堡图标都不显示。
-
.navbar-expand-sm：从576px起展开（最小断点） -
.navbar-expand-lg：从992px起展开（适合默认桌面优先） - 别漏掉
<div class="collapse navbar-collapse"> 包裹菜单项，否则 JS 无法控制收展 <h3> <code>.navbar-toggler必须配data-bs-toggle="collapse"和正确href汉堡按钮本身只是个触发器，它不自带逻辑。必须显式声明：
data-bs-toggle="collapse"指明要控制折叠组件，且href或data-bs-target必须指向对应.collapse元素的 ID（注意 ID 前带#）。典型翻车现场：
href="#navbarNav"写成href=".navbar-nav"或漏掉#，点击后菜单毫无反应，控制台也无报错——纯属选择器不匹配。- HTML 中
<button class="navbar-toggler" data-bs-toggle="collapse" href="#navbarNav"></button> - 对应菜单容器：
<div class="collapse navbar-collapse" id="navbarNav"> <li>Bootstrap 5 不再依赖 jQuery，所有交互靠 <code>bootstrap.bundle.min.js里的 Collapse 插件 - 正确写法：
<li class="nav-item"><a class="nav-link" href="#">首页</a></li> - 下拉触发项：
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">产品</a></li> - 别在
.nav-link上手动加display: block或line-height，会破坏垂直居中 -
.navbar-dark适配深底色，自动设文本为浅色、悬停为亮色 -
.navbar-light适配浅底色，文本默认深灰，悬停加背景 - 如果用了自定义背景色（如
bg-primary），记得同步加.navbar-dark或.navbar-light来保证可访问性
导航链接要用
.nav-link，别直接套<a></a>或.btn.nav-link不只是加点颜色和 padding，它内置了悬停状态、焦点轮廓、移动端触摸适配、以及与.navbar-nav的垂直居中对齐逻辑。用普通<a></a>或.btn会导致文字上下偏移、点击热区变小、键盘导航失效。尤其注意下拉菜单：
.dropdown-item必须放在.dropdown-menu内，且父级<li>要加.dropdown类，否则 JS 不会初始化下拉行为。自定义颜色时优先改
.navbar-light/.navbar-dark，而非硬写 CSSBootstrap 导航栏的文本/图标颜色、悬停反色、聚焦轮廓，都由
.navbar-light或.navbar-dark驱动。直接覆盖color或background-color很容易漏掉:focus、:hover、.dropdown-item:hover等状态，导致小屏点击无反馈、键盘用户无法识别焦点。比如想用深蓝背景浅灰文字，应该：
<nav class="navbar navbar-dark bg-dark"></nav>，而不是style="background:#0d47a1;color:#eee"。 - HTML 中
