Bootstrap4 面包屑导航（Breadcrumb）学习笔记
一、基本概念
面包屑导航用于指示当前页面在导航层级中的位置，通常出现在页面顶部，帮助用户了解所处位置并快速返回上级页面。
典型形态：首页 > 分类 > 子分类 > 当前页
二、基本用法
<navaria-label="breadcrumb"><olclass="breadcrumb"><liclass="breadcrumb-item"><ahref="#">首页</a></li><liclass="breadcrumb-item"><ahref="#">产品管理</a></li><liclass="breadcrumb-item"><ahref="#">电子产品</a></li><liclass="breadcrumb-item active"aria-current="page">手机</li></ol></nav>渲染效果：
首页 / 产品管理 / 电子产品 / 手机三、核心类与属性
| 类名 / 属性 | 说明 |
|---|---|
.breadcrumb | 面包屑容器（<ol>），设置水平排列和分隔符 |
.breadcrumb-item | 每个面包屑项（<li>） |
.breadcrumb-item.active | 当前页项，不可点击，无链接 |
aria-label="breadcrumb" | 容器上的无障碍标签 |
aria-current="page" | 当前页项上的无障碍标识，告知屏幕阅读器这是当前页面 |
四、分隔符
默认分隔符：/
Bootstrap4 默认通过 CSS 伪元素::before添加/分隔符：
.breadcrumb-item + .breadcrumb-item::before{content:"/";}自定义分隔符
通过覆盖 CSS 修改：
/* 改为 > */.breadcrumb-item + .breadcrumb-item::before{content:">";}/* 改为 - */.breadcrumb-item + .breadcrumb-item::before{content:"-";}/* 使用图标（如 Font Awesome） */.breadcrumb-item + .breadcrumb-item::before{content:"\f054";/* fa-chevron-right 的 Unicode */font-family:"Font Awesome 5 Free";font-weight:900;font-size:0.75rem;}去掉分隔符
.breadcrumb-item + .breadcrumb-item::before{content:none;}五、样式定制
1. 默认样式
灰色背景圆角条，适合大多数场景。
2. 修改背景色
<olclass="breadcrumb bg-dark"><liclass="breadcrumb-item"><ahref="#"class="text-light">首页</a></li><liclass="breadcrumb-item active text-white"aria-current="page">当前页</li></ol>3. 透明背景
<olclass="breadcrumb bg-transparent"><liclass="breadcrumb-item"><ahref="#">首页</a></li><liclass="breadcrumb-item active"aria-current="page">当前页</li></ol>4. 去掉圆角
<olclass="breadcrumb rounded-0">...</ol>5. 去掉内边距
<olclass="breadcrumb p-0 m-0">...</ol>六、常见场景示例
1. 电商分类路径
<navaria-label="breadcrumb"><olclass="breadcrumb"><liclass="breadcrumb-item"><ahref="#">首页</a></li><liclass="breadcrumb-item"><ahref="#">全部分类</a></li><liclass="breadcrumb-item"><ahref="#">手机数码</a></li><liclass="breadcrumb-item"><ahref="#">手机通讯</a></li><liclass="breadcrumb-item active"aria-current="page">智能手机</li></ol></nav>2. 后台管理路径
<navaria-label="breadcrumb"><olclass="breadcrumb"><liclass="breadcrumb-item"><ahref="#"><iclass="fa fa-home"></i>首页</a></li><liclass="breadcrumb-item"><ahref="#">系统管理</a></li><liclass="breadcrumb-item"><ahref="#">用户管理</a></li><liclass="breadcrumb-item active"aria-current="page">编辑用户</li></ol></nav>3. 文档/知识库路径
<navaria-label="breadcrumb"><olclass="breadcrumb bg-transparent pl-0"><liclass="breadcrumb-item"><ahref="#">文档中心</a></li><liclass="breadcrumb-item"><ahref="#">开发指南</a></li><liclass="breadcrumb-item"><ahref="#">快速入门</a></li><liclass="breadcrumb-item active"aria-current="page">环境搭建</li></ol></nav>4. 配合卡片使用
<divclass="card"><divclass="card-header"><navaria-label="breadcrumb"><olclass="breadcrumb mb-0 p-0 bg-transparent"><liclass="breadcrumb-item"><ahref="#">首页</a></li><liclass="breadcrumb-item active"aria-current="page">用户列表</li></ol></nav></div><divclass="card-body"><h5>用户列表</h5><!-- 表格内容 --></div></div>七、CSS 源码解析
Bootstrap4 中面包屑的核心样式：
.breadcrumb{display:flex;/* 水平排列 */flex-wrap:wrap;/* 允许换行 */padding:0.75rem 1rem;margin-bottom:1rem;list-style:none;/* 去掉列表序号 */background-color:#e9ecef;/* 灰色背景 */border-radius:0.25rem;}.breadcrumb-item + .breadcrumb-item{padding-left:0.5rem;/* 项之间左内边距 */}.breadcrumb-item + .breadcrumb-item::before{display:inline-block;padding-right:0.5rem;/* 分隔符右内边距 */color:#6c757d;/* 分隔符颜色 */content:"/";/* 默认分隔符 */}.breadcrumb-item + .breadcrumb-item:hover::before{text-decoration:underline;/* 悬停时下划线（链接下划线延伸） */}.breadcrumb-item.active{color:#6c757d;/* 当前项灰色 */}八、完整示例
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Bootstrap4 面包屑导航示例</title><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"><style>/* 自定义分隔符示例 */.breadcrumb-gt .breadcrumb-item + .breadcrumb-item::before{content:">";}.breadcrumb-arrow .breadcrumb-item + .breadcrumb-item::before{content:"→";}</style></head><body><divclass="container mt-4"><h5>1. 基础面包屑</h5><navaria-label="breadcrumb"><olclass="breadcrumb"><liclass="breadcrumb-item"><ahref="#">首页</a></li><liclass="breadcrumb-item"><ahref="#">产品管理</a></li><liclass="breadcrumb-item active"aria-current="page">产品列表</li></ol></nav><h5>2. 自定义分隔符 ></h5><navaria-label="breadcrumb"><olclass="breadcrumb breadcrumb-gt"><liclass="breadcrumb-item"><ahref="#">首页</a></li><liclass="breadcrumb-item"><ahref="#">系统设置</a></li><liclass="breadcrumb-item active"aria-current="page">权限配置</li></ol></nav><h5>3. 自定义分隔符 →</h5><navaria-label="breadcrumb"><olclass="breadcrumb breadcrumb-arrow"><liclass="breadcrumb-item"><ahref="#">首页</a></li><liclass="breadcrumb-item"><ahref="#">文档中心</a></li><liclass="breadcrumb-item active"aria-current="page">API 文档</li></ol></nav><h5>4. 深色背景</h5><navaria-label="breadcrumb"><olclass="breadcrumb bg-dark"><liclass="breadcrumb-item"><ahref="#"class="text-light">首页</a></li><liclass="breadcrumb-item"><ahref="#"class="text-light">数据中心</a></li><liclass="breadcrumb-item active text-white"aria-current="page">报表查看</li></ol></nav><h5>5. 透明背景（嵌入卡片头部）</h5><divclass="card"><divclass="card-header"><navaria-label="breadcrumb"><olclass="breadcrumb mb-0 p-0 bg-transparent"><liclass="breadcrumb-item"><ahref="#">首页</a></li><liclass="breadcrumb-item"><ahref="#">用户管理</a></li><liclass="breadcrumb-item active"aria-current="page">用户详情</li></ol></nav></div><divclass="card-body"><p>用户详情内容...</p></div></div></div><scriptsrc="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script></body></html>九、注意事项
- 使用有序列表
<ol>：语义上面包屑有先后顺序，应使用<ol>而非<ul> - 当前项不加链接：
.active项不应包含<a>标签，它代表当前页面，无需导航 aria-current="page"不可省略：告诉屏幕阅读器这是当前页面，是无障碍的关键属性aria-label="breadcrumb"：<nav>上添加此标签，区分页面中可能存在的多个<nav>区域- 分隔符通过 CSS 伪元素实现：不是 HTML 内容，修改分隔符只需覆盖 CSS，不要在 HTML 中手动插入分隔符
- 层级不宜过深：建议 3-5 层，超过 5 层说明信息架构可能需要优化
- 面包屑不是主导航：它是辅助定位工具，不能替代主导航栏
