Bootstrap的bg-*类仅设背景色，不自动适配文字色或响应式状态，需手动同步调整.navbar-brand、.nav-link等文字颜色，并验证深色模式与移动端折叠态下的可读性。
直接加 bg-* 类为什么颜色不对
Bootstrap 的 bg-dark、bg-primary 等类只是预设色块，它们不自动适配文字可读性或响应式状态。比如 bg-black 在深色屏上会让 .navbar-brand 和 .navbar-toggler-icon 几乎不可见；而 bg-light 配默认 .navbar-light 时，下拉菜单仍用白色背景，造成视觉割裂。
常见错误是只改背景不调文字色：加了 bg-dark 却没同步处理 a.nav-link、.navbar-brand、.navbar-toggler-icon 的颜色，结果链接灰成一片。
- 优先用
bg-*类快速试色，但上线前必须人工验证移动端折叠态和深色模式下的对比度 - 别依赖
.navbar-dark自动翻转文字色——它只对内置bg-dark/bg-light做有限适配，自定义色值时完全失效 - 若用 Sass 编译，改
$navbar-dark-color或$navbar-light-color变量比写 CSS 更可靠，但需确保在@import "bootstrap/scss/navbar"之前赋值
用 CSS 变量覆盖 --bs-navbar-bg 为什么没生效
Bootstrap 5.3+ 支持 --bs-navbar-bg，但它只作用于 .navbar 元素自身背景，不控制折叠菜单、下拉项或边框。很多人写了 style="--bs-navbar-bg: #1a1d22;"，发现导航栏变色了，但折叠后弹出的菜单还是白底——因为那部分由 --bs-navbar-dropdown-bg 控制。
更隐蔽的问题是变量加载顺序：:root 中声明的变量会被 Bootstrap 的默认 :root 块覆盖（尤其用 CDN 引入时），必须确保你的 <style></style> 或自定义 CSS 文件在 Bootstrap CSS 之后加载。
- 要统一控制，至少设三个变量：
--bs-navbar-bg（导航栏本体）、--bs-navbar-color（常规文字）、--bs-navbar-dropdown-bg（折叠/下拉菜单背景） -
--bs-navbar-dropdown-bg仅对.dropdown-menu生效；如果是data-bs-toggle="collapse"模式，则得单独写.navbar-collapse.show { background-color: #1a1d22; } - 移动端折叠菜单弹出后，
.navbar-collapse.show容器本身透明，真正显色的是其子元素.navbar-nav或.dropdown-menu，务必 inspect 元素确认渲染路径
自定义深色背景时 .navbar-toggler 边框看不见怎么办
默认 .navbar-toggler 边框色是 rgba(255,255,255,.1)，在 #121418 这类极深背景上完全隐形。这不是 bug，是 Bootstrap 假设你用的是标准 bg-dark（#343a40），而非自定义深灰。
不能只改 .navbar-toggler 的 border-color，还得同步处理 .navbar-toggler-icon 的 SVG 路径色——它的默认 fill 是 currentColor，继承自父级文字色，而父级可能被 .navbar-dark 锁死为浅灰。
- 最稳方案：给
.navbar加内联 style 或 class，显式设--bs-navbar-toggler-border-color: #6c757d;和--bs-navbar-color: #e9ecef; - 如果用 Sass，覆盖
$navbar-toggler-border-color和$navbar-dark-color，避免用!important干扰后续状态样式 - 检查是否启用了深色模式媒体查询：
@media (prefers-color-scheme: dark)下若没重置这些变量，系统切暗色时边框又会消失
滚动时导航栏从透明变色，classList.toggle 为啥卡顿
在 scroll 事件里直接调 element.classList.toggle('bg-white')，尤其搭配 position: sticky，在 iOS Safari 上极易掉帧。这不是 JS 写法错，而是浏览器重排压力过大——每次滚动都触发样式计算 + 重绘。
真正关键不是“加不加类”，而是“什么时候加”。靠 scroll 事件监听本身没问题，但必须用 requestAnimationFrame 节流，并配合 getBoundingClientRect() 判断导航栏是否已脱离视口顶部，而不是简单看 window.scrollY > 10。
- 阈值别硬写
10px：用document.querySelector('.navbar').offsetHeight动态取值，兼容有 logo 或搜索框的复杂导航栏 - 加
transition: background-color 0.3s ease到.navbar，否则变色突兀；但别加transform或box-shadow过渡，会触发额外合成层 - 如果导航栏含下拉菜单，展开时
offsetHeight会暴涨，建议在折叠态下取值，或监听resize事件缓存高度
最易被忽略的点：所有自定义背景色都得过无障碍对比度检测。比如 #1a1d22 配 #e9ecef 文字，在低亮度屏幕或 OLED 屏上实际对比度可能低于 4.5:1。别只信设计稿，用 Chrome DevTools 的 Accessibility 面板实测。
