Bootstrap的breadcrumb组件用于展示页面层级路径，需用ol包裹li，当前页用class="active"和aria-current="page"标识，非当前页用a标签加class="breadcrumb-item"，外层nav需设aria-label="breadcrumb"以保障可访问性。

Bootstrap 的 breadcrumb 组件用来展示页面层级路径，结构简单、语义清晰，用 HTML 搭配 Bootstrap 类名就能快速实现。

基础结构：用 ol + li + a 构建

面包屑必须使用有序列表 ol 作为容器，每个层级用 li 包裹，当前页用 li class="active" 标识，不加链接；其他层级用 a 标签指向对应页面。

示例代码：

  

    
1. 首页

    
2. 产品中心

    
3. 笔记本电脑

  

关键类名和属性不能少

确保以下几点才能正确渲染并具备可访问性：

立即学习“前端免费学习笔记（深入）”；

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• ol 必须有 class="breadcrumb"
• 外层 nav 添加 aria-label="breadcrumb"，便于屏幕阅读器识别
• 当前页的 li 加 class="active" 和 aria-current="page"
• 非当前页统一用 class="breadcrumb-item"，内部包裹 a

支持分隔符自定义（v5.3+）

默认分隔符是斜杠 /，可通过 CSS 变量修改：

.breadcrumb {
  --bs-breadcrumb-divider: "›"; /* 替换为箭头 */
}

也可用 data-bs-separator 属性临时指定，例如：

响应式与嵌套注意事项

Bootstrap 的 breadcrumb 默认是行内块级布局，小屏幕下会自动换行。如需强制单行显示，可加 flex-nowrap 到 ol 上。

不要在 breadcrumb 内部嵌套其他导航组件或按钮，它只用于路径展示，语义和功能都应保持单一。