• 前端
• UI组件

面包屑（Breadcrumb）用于在导航层级中标识当前页面所处位置，是 Bootstrap 组件体系中轻量但高频使用的导航元素。本文以 BOOTSTRA.386 仓库中 Breadcrumb 组件文档 为核心骨架，结合v5.3.1分支下的源码实现（_breadcrumb.scss、_variables.scss、_functions.scss），完整讲解其基础标记、分隔符定制（CSS 自定义属性与 Sass 变量双通道）、SVG 图标分隔符、无障碍要求，并剖析底层实现原理与 RTL 适配方案，帮助你在这个 DOS 复古风格的 Bootstrap 5.3 主题中直接落地可用的面包屑导航。

一、基础用法：构建一个最小化面包屑

面包屑组件的结构非常简单：外层使用<nav>包裹，内层使用有序列表<ol>（也可以是无序列表<ul>）承载列表项，每个列表项即一层导航层级。

BOOTSTRA.386 官方文档给出的三组示例完整覆盖了常见场景——单层级、双层级与多层级：

<nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item active" aria-current="page">Home</li> </ol> </nav> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active" aria-current="page">Library</li> </ol> </nav> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active" aria-current="page">Data</li> </ol> </nav>

要点如下：

• .breadcrumb是容器类，负责整体布局与背景样式；.breadcrumb-item是每一层的条目类。
• 链接项使用<a href="#">，当前页使用.active类并配合aria-current="page"。
• 组件默认样式是"极简"的：不强制内边距、背景色与圆角，因此文档建议借助 Bootstrap 的 utilities（工具类）按需追加样式，例如p-3、bg-body-tertiary、rounded-3等。这一设计在 迁移说明 中有明确记录：v5.2.0 起"简化了面包屑的默认外观，移除了padding、background-color与border-radius"。

官方示例页 breadcrumbs/index.html 正是这一思路的实战范本：它在<ol class="breadcrumb p-3 bg-body-tertiary rounded-3">上叠加工具类，得到带背景、内边距和圆角的完整卡片式面包屑。

二、分隔符（Dividers）：由 CSS 自动生成，可全局可局部定制

2.1 分隔符的生成原理

分隔符不需要在 HTML 中手写，而是由 CSS 通过::before伪元素与content属性自动添加，默认值是斜杠/。这一点在源码中可以直接验证：在 _breadcrumb.scss 中，相邻列表项通过相邻兄弟选择器+ .breadcrumb-item触发::before：

.breadcrumb-item { // The separator between breadcrumbs (by default, a forward-slash: "/") + .breadcrumb-item { padding-left: var(--#{$prefix}breadcrumb-item-padding-x); &::before { float: left; // Suppress inline spacings and underlining of the separator padding-right: var(--#{$prefix}breadcrumb-item-padding-x); color: var(--#{$prefix}breadcrumb-divider-color); content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"}; } } &.active { color: var(--#{$prefix}breadcrumb-item-active-color); } }

注意content属性的写法：优先读取局部 CSS 自定义属性--bs-breadcrumb-divider（BOOTSTRA.386 的变量前缀$prefix默认为bs-，见 _variables.scss），取不到时才回退到 Sass 变量$breadcrumb-divider。这就是文档所说的"Sass 变量作为自定义属性的回退值，从而实现无需重编译 CSS 即可随时覆盖的全局分隔符"。

2.2 方式一：通过 CSS 自定义属性（推荐，运行时覆盖）

在<nav>上以内联style直接声明--bs-breadcrumb-divider，即可把当前导航的分隔符改为任意字符，无需重新编译：

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active" aria-current="page">Library</li> </ol> </nav>

由于该自定义属性是作用在.breadcrumb上的局部 CSS 变量（local CSS variable），因此既可以只对单个导航生效，也可以写进你自己的 CSS 规则里实现批量覆盖。

2.3 方式二：通过 Sass 变量（编译期定制）

修改 Sass 变量时，必须使用quote()函数为字符串加上引号，否则生成的 CSScontent值不合法。例如把分隔符改为>：

$breadcrumb-divider: quote(">");

2.4 使用内嵌 SVG 图标作为分隔符

分隔符同样可以是 SVG 图标，通过 CSS 自定义属性或 Sass 变量两种途径注入 data URI。

关键坑点：内联 SVG 必须做字符转义。像<、>、#这类保留字符必须 URL 编码或转义。官方文档在 Sass 变量路径下由escape-svg()函数自动处理；而走 CSS 自定义属性路径时，需要你自己完成转义。

CSS 自定义属性路径（注意"是引号的 HTML 实体转义，%3C/%3E是</>的 URL 编码）：

<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active" aria-current="page">Library</li> </ol> </nav>

Sass 变量路径（由escape-svg()负责转义，#{$breadcrumb-divider-color}动态注入颜色）：

$breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>");

从源码看，escape-svg()定义在 _functions.scss，其逻辑是：当字符串以data:image/svg+xml开头时，遍历$escaped-characters映射表逐个替换保留字符，同时保证url(括号本身不被转义。_breadcrumb.scss中content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider))这一行，就是 Sass 路径自动调用escape-svg()的入口。

2.5 移除分隔符

如果不想显示任何分隔符，两种方式二选一：

CSS 自定义属性路径（注意：CSS 自定义属性中的空字符串也属于有效值，可以正常覆盖）：

<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active" aria-current="page">Library</li> </ol> </nav>

Sass 变量路径：

$breadcrumb-divider: none;

三、无障碍（Accessibility）要求

面包屑本质上是导航，因此官方文档明确要求两处 ARIA 属性：

1. 在<nav>上添加aria-label="breadcrumb"（或其它有意义的标签），描述这是面包屑类型的导航；
2. 在最后一个列表项上添加aria-current="page"，向辅助技术标识当前页面。

完整的 ARIA 模式可参考 ARIA Authoring Practices Guide 中的 breadcrumb pattern（文档原文给出了 W3C 参考链接）。这一点也体现在文档所有示例中：每个<nav>都带aria-label="breadcrumb"，每个.active项都带aria-current="page"。

四、CSS 变量与 Sass 变量一览

4.1 局部 CSS 变量（.breadcrumb上，v5.2.0 起新增）

随着 Bootstrap 逐步转向 CSS 变量体系，面包屑自 v5.2.0 起在.breadcrumb上使用局部 CSS 变量实现"实时定制"；这些 CSS 变量的取值由 Sass 变量在编译期写入，因此 Sass 定制通道仍然保留。完整声明见 _breadcrumb.scss 开头的breadcrumb-css-vars片段：

4.2 Sass 变量（默认值与全部取值）

全部面包屑 Sass 变量集中定义在 _variables.scss 的breadcrumb-variables片段中，带!default标志，可按 Bootstrap 惯例在引入前覆盖：

$breadcrumb-font-size: null !default; $breadcrumb-padding-y: 0 !default; $breadcrumb-padding-x: 0 !default; $breadcrumb-item-padding-x: .5rem !default; $breadcrumb-margin-bottom: 1rem !default; $breadcrumb-bg: null !default; $breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default; $breadcrumb-active-color: var(--#{$prefix}secondary-color) !default; $breadcrumb-divider: quote("/") !default; $breadcrumb-divider-flipped: $breadcrumb-divider !default; $breadcrumb-border-radius: null !default;

其中$breadcrumb-divider-flipped专门用于 RTL（从右到左）场景，默认与$breadcrumb-divider相同。这是整个 Bootstrap 中唯一需要独立 RTL 变量的分隔符场景，详见 RTL 文档中的 "The breadcrumb case"。从_breadcrumb.scss中content值里的/* rtl: */注释可以看出，分隔符在编译后通过 RTLCSS 标记实现 LTR/RTL 的自动切换。

五、源码原理剖析：组件如何被组装进主题

• 引入位置：_breadcrumb.scss通过 bootstrap.scss 中的@import "breadcrumb";进入主题的编译栈（Layout & components 区块）。
• 变量前缀：--#{$prefix}...中的$prefix在 BOOTSTRA.386 中默认为bs-（$variable-prefix: bs-），因此产出形如--bs-breadcrumb-divider的变量名。
• DOS 复古风格兼容：BOOTSTRA.386 的主题增强集中在 _dos.scss（如bootstra-cursor、滚动条等），面包屑组件本身沿用 Bootstrap 5.3 的标准实现，其默认的"无背景、无内边距"极简形态天然适配 DOS 风格的紧凑排版，分隔符颜色默认取自--bs-secondary-color，与主题的整体配色体系一致。

六、进阶实战：官方示例页的两种扩展形态

文档配套的示例页 breadcrumbs/index.html 与样式文件 breadcrumbs.css 提供了两种值得借鉴的扩展玩法：

1. 箭头分隔符（breadcrumb-chevron）：通过局部 CSS 变量覆盖分隔符为旋转 90° 的 SVG 箭头图标，并配合gap: .5rem、display: flex让图标与文字垂直居中：

.breadcrumb-chevron { --bs-breadcrumb-divider: url("data:image/svg+xml,...chevron SVG data URI..."); gap: .5rem; } .breadcrumb-chevron .breadcrumb-item { display: flex; gap: inherit; align-items: center; padding-left: 0; line-height: 1; }

2. 自定义切角形态（breadcrumb-custom）：隐藏默认的::before分隔符，改用::after绘制倾斜的平行四边形切角，形成连续的"标签式"层级导航——这正是把"用 utilities 自定义样式"和"覆盖分隔符"两个机制组合起来做深度定制的范例。

七、小结

在 BOOTSTRA.386 中接入面包屑组件只需三步：用<nav aria-label="breadcrumb">+<ol class="breadcrumb">+.breadcrumb-item搭好语义化结构；对当前页使用.active与aria-current="page"；再按需通过--bs-breadcrumb-divider（运行时）或$breadcrumb-divider（编译期）定制分隔符。其底层实现——::before自动生成分隔符、CSS 变量与 Sass 变量双通道回退、escape-svg()自动转义、$breadcrumb-divider-flipped支持 RTL——都可以在 _breadcrumb.scss、_variables.scss 与 _functions.scss 中逐一印证，让你在定制时既知其然，也知其所以然。

• 前端
• UI组件