navbar-dark 仅控制文字和图标颜色，背景色需显式添加 bg-dark 等类；二者必须共存，否则导航栏透明；折叠菜单、响应式切换、自定义背景等场景均需单独处理背景与文字色。
直接给结论：navbar-dark 本身不控制背景色，只管文字和图标颜色；背景必须显式加 bg-dark（或其它 bg-* 类），否则导航栏默认透明——这就是为什么你加了 navbar-dark 却看不到深色背景。
navbar-dark 和 bg-dark 必须同时存在
navbar-dark 是语义类，仅作用于内部元素：它让 .navbar-brand、.nav-link、.navbar-toggler-icon 默认变白；但它的生效前提是这些元素被正确包裹在 Bootstrap 规范结构里。
- 漏掉
.navbar-brand？品牌文字可能还是黑的——navbar-dark不会自动染黑任意文本 - 没加
bg-dark？整个导航栏仍是透明/继承父背景，navbar-dark再努力也盖不住底色 - 用了
bg-black而非bg-dark？bg-black是纯黑（#000），bg-dark是 Bootstrap 定义的 #212529，后者对图标/边框留有余量，可读性更稳 - 自定义深色背景（如
style="background-color: #1a1d22"）？必须同步设style="--bs-navbar-color: #e9ecef;"，否则链接文字灰蒙蒙
响应式切换时 class 冲突最常出在这儿
Vue 或 React 动态绑定 :class 时，navbar-dark 和 navbar-light 不能共存，bg-dark 和 bg-light 也不能共存——否则 CSS 优先级打架，文字突然消失或背景错乱。
- 错误写法：
:class="['navbar', useDark ? 'navbar-dark' : 'navbar-light', useDark ? 'bg-dark' : 'bg-light']"—— 看似合理，但若初始状态为useDark = false，后续切到 true 时，旧的navbar-light可能未被清除（尤其在 Vue 2 或未用响应式 key 的场景） - 推荐写法：
:class="[useDark ? 'navbar-dark bg-dark' : 'navbar-light bg-light']"，把整组类当原子处理 - 绝对不要混用
data-bs-theme="dark"：它是全局主题开关，会覆盖单个 navbar 的 class 控制，导致切换失效甚至 navbar “消失” - 移动端折叠菜单弹出后背景仍是白的？因为
.navbar-collapse默认无背景，得额外加bg-dark到.collapse容器上
滚动时动态变色，别碰 bg-transparent
想实现“首屏透明 → 滚动后变白/变黑”，核心是 JS 控制 bg-white 或 bg-dark 的增删，而不是靠 CSS 写 background: transparent 等着它自己变。
-
bg-transparent的 CSS 优先级极高，一旦写了，JS 后续加bg-white会被它压住，背景永远不变 - 正确初始化：导航栏标签上**一个
bg-*类都不要加**，让 JS 全权控制 - 监听
scroll时用requestAnimationFrame节流，避免 iOS Safari 卡顿 - 阈值别硬写
window.scrollY > 60，改用document.querySelector('.navbar').offsetHeight * 0.8，适配不同设备和字体缩放
真正容易被忽略的是折叠菜单展开后的样式隔离——.navbar-collapse 是独立 DOM 区域，它的背景、文字色不会继承 .navbar 的 bg-dark 或 navbar-dark，必须单独处理。这点在手机端调试时最容易漏掉。
