用.breadcrumb类快速生成Bootstrap 4面包屑需：<nav aria-label="breadcrumb">包裹、<ol class="breadcrumb">结构、每级<li class="breadcrumb-item">、当前页加aria-current="page"并可选active类；分隔符默认/，4.5+可用--bs-breadcrumb-divider自定义。
怎么用 .breadcrumb 类快速生成标准路径导航
bootstrap 4 的面包屑导航不需要额外 js，纯 css 驱动，只要结构对、类名对，分隔符和样式就自动生效。
关键点是：必须用 <nav> 包裹 + <ol>（有序列表），每级用 <li>，当前页加 aria-current="page" —— 这不是可选的，它影响语义化和屏幕阅读器行为。
常见错误现象：<ul> 替代 <ol> 导致分隔符不显示；漏掉 .breadcrumb 类名，整个结构看起来像普通列表；当前页没加 aria-current="page"，视觉上无灰底/粗体区分。
<nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item"><a href="#">Products</a></li><li class="breadcrumb-item active" aria-current="page">Wireless</li></ol></nav>- 分隔符默认是
/（空格+斜杠），由 CSS 伪元素.breadcrumb > li + li:before渲染，不是写死在 HTML 里的
如何把分隔符从 / 换成 > 或其他符号
Bootstrap 4.5+ 支持 CSS 自定义属性控制分隔符，比覆盖伪元素更干净、更易维护。
直接在 <ol class="breadcrumb"> 上加内联 style：style="--bs-breadcrumb-divider: '>';"。注意单引号要包住符号，否则 > 会被 HTML 解析为标签结束符。
兼容性注意：这个变量只在 Bootstrap 4.5 及以上有效；低于 4.5 的版本只能手动覆盖 .breadcrumb > li + li:before 的 content 值，且需加 !important 才能生效。
- 支持任意字符：
style="--bs-breadcrumb-divider: '•';"、style="--bs-breadcrumb-divider: '›';"（Unicode 箭头） - 若项目用的是本地引入的旧版 Bootstrap（如 4.3），改
content时务必检查 CSS 权重，推荐写在<style>块里并加!important
为什么 aria-current="page" 不能用 class="active" 替代
单纯加 class="active" 能让当前项变灰、去链接样式，但无法传达“这是当前页面”的语义信息——这对无障碍访问（如读屏软件）、SEO 和自动化测试都构成隐患。
Bootstrap 4 的 CSS 规则其实是这样写的：.breadcrumb .breadcrumb-item.active 和 .breadcrumb .breadcrumb-item[aria-current="page"] 是两个独立选择器，都触发相同样式。但只有后者被 W3C 推荐为现代语义标准。
- 错误写法：
<li class="breadcrumb-item active">Current</li>（缺aria-current） - 正确写法：
<li class="breadcrumb-item active" aria-current="page">Current</li>（类名 + 属性双保险） - 如果后端模板动态渲染，建议优先判断
aria-current，再决定是否加active类
面包屑要不要服务端渲染？前端拼接有哪些风险
路径层级通常由后端路由或 CMS 决定，硬靠前端 JS 拼接 location.pathname 分段容易出错——比如忽略 URL 编码、多斜杠、带查询参数或哈希值。
典型翻车场景：/products/wireless%20headphones 被 split('/') 切成 ["", "products", "wireless%20headphones"]，中文没解码就显示成乱码；/category/123?sort=price 把 ?sort=price 当作最后一级。
- 安全做法：后端输出完整面包屑结构（JSON 或直接 HTML），前端只负责渲染
- 若必须前端生成，请用
new URL(location.href)解析 pathname，再对每段decodeURIComponent() - 永远不要把面包屑作为导航唯一依据——它只是辅助，主导航仍应依赖明确的菜单或链接入口
aria-label="breadcrumb" 这个属性。它不改变样式，但一旦漏掉，读屏软件可能把整条路径读成“列表，共 3 项”，而不是“面包屑导航，当前位置：无线耳机”。这不是锦上添花，是底线。 
