如何用CSS定制Bootstrap5.3暗色导航栏-css教程-PHP中文网

必须手动覆盖.navbar背景和文字颜色，因data-bs-theme="dark"对.navbar无效；需显式设置background-color、.navbar-brand与.nav-link颜色、悬停/激活态样式，并为.navbar-toggler-icon和.navbar-collapse补充适配样式。

如何用css定制bootstrap5.3暗色导航栏

暗色导航栏必须覆盖 `.navbar` 默认背景和文字颜色

Bootstrap 5.3 的 .navbar 在未指定主题时默认用浅色样式（background-color: #fff，文字为深灰），直接加 data-bs-theme="dark" 不生效——这个属性只对部分组件（如 .form-control、.btn）起作用，.navbar 不在其中。

正确做法是手动覆盖关键 CSS 属性。重点不是“启用暗色模式”，而是“重写 navbar 的视觉层”：

background-color 必须显式设置（例如 #1a1a1a 或 var(--bs-dark)）
.navbar-brand 和 .nav-link 的 color 需单独设为浅色（如 #e9ecef）
悬停/激活状态的 color 和 background-color 也得重定义，否则仍沿用浅色主题下的蓝色高亮
如果用了 .navbar-toggler，其图标（SVG 或三横线）默认是深色，需用 filter: invert(1) 或替换为白色 SVG

`.navbar-dark` 类在 Bootstrap 5.3 中已被废弃

Bootstrap 4 里常用的 .navbar-dark + .bg-dark 组合，在 5.3 中不再保证可用：它不自动适配新颜色系统，且文档已移除该类说明。强行使用会出现文字不可读、下划线残留、响应式断点错位等问题。

替代方案是纯 CSS 覆盖，推荐写在自定义样式表中（且置于 Bootstrap CSS 之后）：

.navbar-custom-dark {
  --bs-navbar-bg: #121212;
  --bs-navbar-color: #e0e0e0;
  --bs-navbar-hover-color: #ffffff;
  --bs-navbar-active-color: #ffffff;
  --bs-navbar-disabled-color: #6c757d;
  --bs-navbar-toggler-border-color: #495057;
}

.navbar-custom-dark .navbar-brand,
.navbar-custom-dark .nav-link {
  color: var(--bs-navbar-color);
}
.navbar-custom-dark .nav-link:hover,
.navbar-custom-dark .nav-link:focus {
  color: var(--bs-navbar-hover-color);
}
.navbar-custom-dark .nav-link.active {
  color: var(--bs-navbar-active-color);
}
.navbar-custom-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23e0e0e0' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h16M4 15h16M4 23h16'/%3e%3c/svg%3e");
}

响应式折叠菜单（`.navbar-collapse`）在暗色下容易漏调背景

小屏幕展开的折叠菜单，默认继承父级 .navbar 的背景，但 Bootstrap 5.3 的 .navbar-collapse 内部容器（如 .navbar-nav）没有自动继承背景色，常导致展开后一片透明或显示底层页面内容——尤其在滚动时更明显。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

必须显式给 .navbar-collapse 设置背景：

加 style="background-color: var(--bs-navbar-bg);" 行内样式（快速验证）
或在 CSS 中补全：.navbar-custom-dark .navbar-collapse { background-color: var(--bs-navbar-bg); }
若使用下拉菜单（.dropdown-menu），它默认白底黑字，需额外加 .dropdown-menu-dark 类，或覆写 background-color 和 color

与 Bootstrap 主题切换逻辑共存时，`:root` 变量不能直接覆盖 `.navbar`

如果你项目中已接入 data-bs-theme 切换（比如通过 JS 切换 document.documentElement.setAttribute('data-bs-theme', 'dark')），别指望仅靠修改 :root 里的 --bs-primary 或 --bs-dark 就能改变 .navbar 外观——它不监听这些变量变化，也不绑定到 navbar 渲染逻辑上。

真正可行的联动方式只有两种：