Bootstrap4 面包屑导航 - 创建直观的网站导航路径

最后编辑于2025-04-14 12:35:02.6996937 +0800 CST

Bootstrap4 面包屑导航 ¶

面包屑导航是一种基于网站层次信息的显示方式，可帮助用户了解他们在网站中的位置，并提供返回上级页面的快捷方式。Bootstrap4提供了简单而美观的面包屑导航组件。

什么是面包屑导航？ ¶

面包屑导航的名称来源于童话故事《汉赛尔与格莱特》，故事中的孩子们在森林中撒下面包屑以便找到回家的路。在网页设计中，面包屑导航同样帮助用户"找到回家的路"。

面包屑导航通常用于：

显示当前页面在网站结构中的层次位置
允许用户快速导航到上级页面
改善网站的SEO，因为它们创建了内部链接结构

基本面包屑导航 ¶

Bootstrap 中的面包屑导航是一个简单的带有 .breadcrumb 类的有序列表，列表项使用 .breadcrumb-item 类标记。分隔符会通过 CSS 自动添加。

使用有序列表创建面包屑 ¶

html

 1<ol class="breadcrumb">
 2  <li class="breadcrumb-item active">首页</li>
 3</ol>
 4
 5<ol class="breadcrumb">
 6  <li class="breadcrumb-item"><a href="#">首页</a></li>
 7  <li class="breadcrumb-item active">产品</li>
 8</ol>
 9
10<ol class="breadcrumb">
11  <li class="breadcrumb-item"><a href="#">首页</a></li>
12  <li class="breadcrumb-item"><a href="#">产品</a></li>
13  <li class="breadcrumb-item active">电子设备</li>
14</ol>

不使用列表的面包屑导航 ¶

我们也可以使用 <nav> 元素和 <a> 标签创建面包屑导航：

html

1<nav class="breadcrumb">
2  <a class="breadcrumb-item" href="#">首页</a>
3  <a class="breadcrumb-item" href="#">产品</a>
4  <a class="breadcrumb-item" href="#">电子设备</a>
5  <span class="breadcrumb-item active">智能手机</span>
6</nav>

自定义面包屑分隔符 ¶

默认情况下，Bootstrap4使用"/“作为分隔符。您可以通过CSS自定义分隔符：

css

1.breadcrumb-item + .breadcrumb-item::before {
2  content: ">";  /* 更改为您想要的分隔符 */
3}

其他常见的分隔符包括：

>（大于号）
»（双右箭头）
|（竖线）
•（圆点）

面包屑导航的最佳实践 ¶

保持简洁：面包屑应该只显示主要导航层次，不要包含太多级别
使用描述性名称：每个面包屑项应清晰描述其对应的页面内容
当前页面不可点击：使用active类标记当前页面，并且不要为其添加链接
响应式设计：确保在移动设备上面包屑导航仍然可用且可读

实际应用场景 ¶

电子商务网站：显示产品分类层次（首页 > 电子产品 > 相机 > 单反相机）
文档网站：显示内容的组织结构（文档首页 > 开发指南 > API参考）
博客：显示分类或时间导航（博客首页 > 2023年 > 10月 > 15日）

面包屑导航虽然简单，但能显著提升用户体验，特别是在层次结构复杂的大型网站中。

		Bootstrap4 面包屑导航（Breadcrumb）

面包屑导航是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置，是在用户界面中的一种导航辅助。

Bootstrap 中的面包屑导航是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中的 ::before 和 content 来添加，下面所示的 class 自动被添加：

.breadcrumb-item + .breadcrumb-item::before { display: inline-block; padding-right: 0.5rem; color: #6c757d; content: “/”; }

Bootstrap4 面包屑导航实例

尝试一下 »

我们也可以不用列表形式：