导航CSS类描述
在这里，您可以找到一个紧凑的概览，说明您HTML片段中的每个CSS类的用途。这样可以快速调整布局和行为。
重要： 是导航表中的占位符（例如00_Menue），在渲染时会被自定义类替换（例如用于可见性、高亮显示、每个菜单项的图标）。
类概览
| 类 | 使用于 | 目的 / 意义 | 典型交互 |
|---|---|---|---|
bx-DesktopHTML1 |
div 位于导航栏上方 | 主菜单上方的顶部栏（例如通知、促销、应用横幅）。 | 通过数据库占位符（none）控制可见性。 |
bx-DesktopHTML2 |
在导航栏下方的div | 主菜单下方的底部栏（附加信息/徽章）。 | 通过none控制可见性。 |
bx-nav-outer |
包装器，用于nav.bx-nav |
用于定位的外部容器（例如：粘性、阴影、宽度）。 | 全页宽度的布局框架。 |
bx-nav |
nav 主导航 | 基础导航栏（网格/弹性，背景，高度）。 | 全局导航栏样式和响应性。 |
bx-navbar-left |
导航栏左侧栏目 | 菜单图标（汉堡）和徽标区域。 | 包含.bx-nav-icon和.bx-nav-brand. |
bx-navbar-center |
导航栏中间 | 菜单项的容器（UL/LI）包括子菜单. | 通过JS填充移动端/侧边栏（来源：#bxNavPoints）。 |
bx-navbar-right |
导航栏右侧栏目 | 图标组（搜索、明亮/黑暗、登录、语言、购物车、侧边栏）。 | 按钮触发JS功能（例如：BlueSearchBar()）。 |
bx-nav-icon |
按钮 / 图标按钮 | 所有导航条图标的统一样式. | 切换的点击目标（移动栏、侧边栏、搜索等）。 |
bx-nav-brand |
img 徽标 | 徽标展示（大小、间距）。 | 通常链接到 /index.html. |
bx-nav-item |
li 在主菜单中 | 菜单项的列表元素. | 可以与 .has-submenu 组合使用. |
bx-nav-link |
a 在菜单中 | 菜单链接的样式（字体、悬停、活动状态）。 | 通过数据库占位符获取目标/名称. |
has-submenu |
li 带下拉菜单 | 标记带有子菜单的菜单项；激活下拉样式. | 打开/关闭对应的 .bx-navbar-dropdown. |
submenu-toggle |
button 位于链接旁边 | 用于展开/折叠子菜单的控件（Chevron图标）。 | 通常仅在更大屏幕上可见（见工具类）。 |
d-none, d-lg-inline |
按钮上的工具类 | 可见性控制（例如，隐藏 → 从 lg 及以上内联显示）。 | 切换的响应式行为。 |
bx-menu |
下拉菜单中的ul | 子菜单项列表。 | 通过数据库导航填充。 |
bx-navbar-dropdown |
ul（下拉容器） | 下拉面板（定位、阴影、动画）。 | 通过悬停/点击或 .submenu-toggle 打开。 |
bx-dropdown-item |
下拉菜单中的li | 单个子菜单项。 | 包含 .bx-dropdown-link。 |
bx-dropdown-link |
下拉菜单中的a | 下拉菜单内的链接样式。 | 悬停/聚焦状态以提高可用性。 |
bx-mobile-bar |
移动菜单（右侧偏移） | 移动导航和可选块的容器，上下均可。 | 通过 JS 填充（来源：#bxNavPoints）。 |
bx-MobilHTML1， bx-MobilHTML2 |
移动条中的区块 | 移动菜单上方/下方的可选HTML区域（例如，徽标）。 | 通过 |
bx-side-bar |
侧导航（左侧推拉） | 用于备用/附加导航的容器。 | 可以包含菜单或自定义内容。 |
bx-SideHTML1, bx-SideHTML2 |
侧边栏中的模块 | 在侧菜单上方/下方的可选HTML区域（例如，大徽标）。 | 通过 |
WKGBAnzDiv |
购物车图标中的徽章包装器 | 包裹的计数区域（布局/位置）。 | 包含 .WKGBAnzDivInner（数量）。 |
WKGBAnzDivInner |
徽章内部 | 显示当前购物车数量。 | 通过JS填充 #WKGBAnz。 |
数据库中的占位符类
| 占位符 | 描述 | 示例 |
|---|---|---|
|
会在每个菜单项中由一个或多个自定义类替换（例如 only-desktop, highlight, icon-contact）。 | 控制每个按钮在桌面、移动或侧边栏中的可见性/样式。 |
将 .bx-nav-item 与通过 控制的数据库类结合使用，以有针对性地在 #bxNavPoints（桌面）、 .bx-mobile-bar 或 .bx-side-bar 中显示或隐藏单个按钮，而无需调整HTML代码.
常见问题
客户常问我们的问题
在这里你可以了解在你的导航栏 HTML 中负责布局、行为和可见性的 CSS 类。这样你可以有针对性地对导航进行调整.
占位符 是什么意思?
这个占位符会被你在导航表格中（例如 00_Menue）定义的自定义 CSS 类自动替换。通过这个，你可以控制单个菜单项的可见性、高亮和图标.
我如何在导航栏上方或下方插入内容?
使用 bx-DesktopHTML1（上方）和 bx-DesktopHTML2（下方）类。你可以在 CMS 中通过 CMS ⯈ 网站 ⯈ 页眉 显示或隐藏它们.
类 bx-nav-outer 的作用是什么?
它是导航的外部容器。通过它你可以控制导航栏的宽度、阴影或粘性行为.
bx-nav 代表什么?
这个类定义了主要导航本身——也就是导航栏的布局（例如 Flex/Grid）、背景颜色和高度.
导航栏是如何分成几个部分的?
导航栏由三个部分组成：bx-navbar-left（Logo & 菜单图标）、bx-navbar-center（菜单项）、bx-navbar-right（图标如搜索、登录、语言、购物车）.
类 bx-nav-icon 的作用是什么?
它为所有导航栏图标提供统一的样式。这些按钮控制着例如打开 Mobile-Bar、Side-Bar 或搜索.
我如何设计菜单链接?
通过 bx-nav-item 你定义列表项，通过 bx-nav-link 你设置链接的字体、悬停和激活状态的样式规则.
子菜单的控制是如何工作的?
一个具有 has-submenu 类的菜单项包含一个下拉菜单。通过 submenu-toggle（带箭头图标的按钮）可以展开或收缩它.
实用类 d-none 和 d-lg-inline 代表什么?
这些类根据屏幕大小控制单个元素的可见性——非常适合响应式导航.
下拉菜单是如何构建的?
下拉菜单由 bx-navbar-dropdown（容器）组成，里面是 bx-menu（列表），包含 bx-dropdown-item 和 bx-dropdown-link 用于单个子项.
Mobile-Bar 是如何工作的?
bx-mobile-bar 在移动设备上右侧打开，作为一个 Off-Canvas 菜单。它通过 JS 用 #bxNavPoints 中的内容填充。你可以通过 bx-MobilHTML1 和 bx-MobilHTML2 添加额外的块.
什么是 Side-Bar?
bx-side-bar 是一个侧边的 Off-Canvas 菜单（通常在左侧）。在这里你可以放置自己的内容或导航元素，通过 bx-SideHTML1 和 bx-SideHTML2 进行补充.
购物车计数器如何显示？
包装器 WKGBAnzDiv 包含 WKGBAnzDivInner，通过 JS（通过 #WKGBAnz）显示当前商品数量 - 通常作为购物车图标中的徽章。
我如何在特定区域仅显示单个按钮？
将 .bx-nav-item 与 结合使用。这样你可以在 #bxNavPoints（桌面）、.bx-mobile-bar 或 .bx-side-bar 中有选择性地显示或隐藏按钮，而无需更改 HTML 代码。