Bootstrap4 面包屑导航Breadcrumb学习笔记一、基本概念面包屑导航用于指示当前页面在导航层级中的位置通常出现在页面顶部帮助用户了解所处位置并快速返回上级页面。典型形态首页 分类 子分类 当前页二、基本用法navaria-labelbreadcrumbolclassbreadcrumbliclassbreadcrumb-itemahref#首页/a/liliclassbreadcrumb-itemahref#产品管理/a/liliclassbreadcrumb-itemahref#电子产品/a/liliclassbreadcrumb-item activearia-currentpage手机/li/ol/nav渲染效果首页 / 产品管理 / 电子产品 / 手机三、核心类与属性类名 / 属性说明.breadcrumb面包屑容器ol设置水平排列和分隔符.breadcrumb-item每个面包屑项li.breadcrumb-item.active当前页项不可点击无链接aria-labelbreadcrumb容器上的无障碍标签aria-currentpage当前页项上的无障碍标识告知屏幕阅读器这是当前页面四、分隔符默认分隔符/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. 修改背景色olclassbreadcrumb bg-darkliclassbreadcrumb-itemahref#classtext-light首页/a/liliclassbreadcrumb-item active text-whitearia-currentpage当前页/li/ol3. 透明背景olclassbreadcrumb bg-transparentliclassbreadcrumb-itemahref#首页/a/liliclassbreadcrumb-item activearia-currentpage当前页/li/ol4. 去掉圆角olclassbreadcrumb rounded-0.../ol5. 去掉内边距olclassbreadcrumb p-0 m-0.../ol六、常见场景示例1. 电商分类路径navaria-labelbreadcrumbolclassbreadcrumbliclassbreadcrumb-itemahref#首页/a/liliclassbreadcrumb-itemahref#全部分类/a/liliclassbreadcrumb-itemahref#手机数码/a/liliclassbreadcrumb-itemahref#手机通讯/a/liliclassbreadcrumb-item activearia-currentpage智能手机/li/ol/nav2. 后台管理路径navaria-labelbreadcrumbolclassbreadcrumbliclassbreadcrumb-itemahref#iclassfa fa-home/i首页/a/liliclassbreadcrumb-itemahref#系统管理/a/liliclassbreadcrumb-itemahref#用户管理/a/liliclassbreadcrumb-item activearia-currentpage编辑用户/li/ol/nav3. 文档/知识库路径navaria-labelbreadcrumbolclassbreadcrumb bg-transparent pl-0liclassbreadcrumb-itemahref#文档中心/a/liliclassbreadcrumb-itemahref#开发指南/a/liliclassbreadcrumb-itemahref#快速入门/a/liliclassbreadcrumb-item activearia-currentpage环境搭建/li/ol/nav4. 配合卡片使用divclasscarddivclasscard-headernavaria-labelbreadcrumbolclassbreadcrumb mb-0 p-0 bg-transparentliclassbreadcrumb-itemahref#首页/a/liliclassbreadcrumb-item activearia-currentpage用户列表/li/ol/nav/divdivclasscard-bodyh5用户列表/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;/* 当前项灰色 */}八、完整示例!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleBootstrap4 面包屑导航示例/titlelinkrelstylesheethrefhttps://cdn.jsdelivr.net/npm/bootstrap4.6.2/dist/css/bootstrap.min.cssstyle/* 自定义分隔符示例 */.breadcrumb-gt .breadcrumb-item .breadcrumb-item::before{content:;}.breadcrumb-arrow .breadcrumb-item .breadcrumb-item::before{content:→;}/style/headbodydivclasscontainer mt-4h51. 基础面包屑/h5navaria-labelbreadcrumbolclassbreadcrumbliclassbreadcrumb-itemahref#首页/a/liliclassbreadcrumb-itemahref#产品管理/a/liliclassbreadcrumb-item activearia-currentpage产品列表/li/ol/navh52. 自定义分隔符 /h5navaria-labelbreadcrumbolclassbreadcrumb breadcrumb-gtliclassbreadcrumb-itemahref#首页/a/liliclassbreadcrumb-itemahref#系统设置/a/liliclassbreadcrumb-item activearia-currentpage权限配置/li/ol/navh53. 自定义分隔符 →/h5navaria-labelbreadcrumbolclassbreadcrumb breadcrumb-arrowliclassbreadcrumb-itemahref#首页/a/liliclassbreadcrumb-itemahref#文档中心/a/liliclassbreadcrumb-item activearia-currentpageAPI 文档/li/ol/navh54. 深色背景/h5navaria-labelbreadcrumbolclassbreadcrumb bg-darkliclassbreadcrumb-itemahref#classtext-light首页/a/liliclassbreadcrumb-itemahref#classtext-light数据中心/a/liliclassbreadcrumb-item active text-whitearia-currentpage报表查看/li/ol/navh55. 透明背景嵌入卡片头部/h5divclasscarddivclasscard-headernavaria-labelbreadcrumbolclassbreadcrumb mb-0 p-0 bg-transparentliclassbreadcrumb-itemahref#首页/a/liliclassbreadcrumb-itemahref#用户管理/a/liliclassbreadcrumb-item activearia-currentpage用户详情/li/ol/nav/divdivclasscard-bodyp用户详情内容.../p/div/div/divscriptsrchttps://cdn.jsdelivr.net/npm/jquery3.5.1/dist/jquery.slim.min.js/scriptscriptsrchttps://cdn.jsdelivr.net/npm/bootstrap4.6.2/dist/js/bootstrap.bundle.min.js/script/body/html九、注意事项使用有序列表ol语义上面包屑有先后顺序应使用ol而非ul当前项不加链接.active项不应包含a标签它代表当前页面无需导航aria-currentpage不可省略告诉屏幕阅读器这是当前页面是无障碍的关键属性aria-labelbreadcrumbnav上添加此标签区分页面中可能存在的多个nav区域分隔符通过 CSS 伪元素实现不是 HTML 内容修改分隔符只需覆盖 CSS不要在 HTML 中手动插入分隔符层级不宜过深建议 3-5 层超过 5 层说明信息架构可能需要优化面包屑不是主导航它是辅助定位工具不能替代主导航栏