Bootstrap4 面包屑导航

面包屑导航的作用

面包屑导航是一种辅助导航方式，能帮助用户了解当前所在位置，并提供快速返回上级页面的途径。同时，它也对搜索引擎优化(SEO)有积极作用。

基础面包屑导航

Bootstrap 4 提供了简单易用的面包屑导航组件，使用 .breadcrumb 类和列表项创建。

基础示例
效果预览：
HTML 代码：
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">首页</a></li>
    <li class="breadcrumb-item"><a href="#">产品中心</a></li>
    <li class="breadcrumb-item"><a href="#">电子产品</a></li>
    <li class="breadcrumb-item active" aria-current="page">智能手机</li>
  </ol>
</nav>
代码说明：
  • <nav> 元素使用 aria-label 属性提供可访问性描述
  • .breadcrumb 类应用于有序列表 <ol>
  • 每个导航项使用 .breadcrumb-item 类
  • 当前页面项添加 .active 类和 aria-current="page" 属性

定制面包屑导航

您可以通过CSS轻松定制面包屑导航的外观，包括分隔符、颜色和背景等。

自定义分隔符
效果预览：
CSS 代码：
.breadcrumb-icon .breadcrumb-item::before {
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #6c757d;
}

.breadcrumb-icon .breadcrumb-item:first-child::before {
  display: none;
}
自定义样式
效果预览：
CSS 代码：
.breadcrumb-custom {
  background-color: #e9ecef;
  border-radius: 5px;
}

.breadcrumb-custom .breadcrumb-item.active {
  color: #6f42c1;
  font-weight: bold;
}

响应式面包屑导航

在移动设备上，面包屑导航可能需要特殊处理以适应小屏幕。

折叠式面包屑

对于较长的面包屑路径，可以在小屏幕上折叠中间部分，只显示首尾项。

桌面端效果：
移动端效果：
HTML 代码：
<!-- 桌面端面包屑 -->
<nav aria-label="breadcrumb" class="d-none d-md-block">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">首页</a></li>
    <li class="breadcrumb-item"><a href="#">产品分类</a></li>
    <li class="breadcrumb-item"><a href="#">电子产品</a></li>
    <li class="breadcrumb-item"><a href="#">手机通讯</a></li>
    <li class="breadcrumb-item active" aria-current="page">智能手机</li>
  </ol>
</nav>

<!-- 移动端面包屑 -->
<nav aria-label="breadcrumb" class="d-md-none">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">首页</a></li>
    <li class="breadcrumb-item dropdown">
      <a class="dropdown-toggle" href="#" id="breadcrumbDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
        ...
      </a>
      <div class="dropdown-menu" aria-labelledby="breadcrumbDropdown">
        <a class="dropdown-item" href="#">产品分类</a>
        <a class="dropdown-item" href="#">电子产品</a>
        <a class="dropdown-item" href="#">手机通讯</a>
      </div>
    </li>
    <li class="breadcrumb-item active" aria-current="page">智能手机</li>
  </ol>
</nav>

动态生成面包屑

在实际项目中，面包屑导航通常需要根据页面结构动态生成。

JavaScript 动态生成

使用 JavaScript 根据当前页面URL或页面层级动态生成面包屑导航。

效果预览：
JavaScript 代码：
// 面包屑数据
const breadcrumbData = [
  { name: '首页', url: '/' },
  { name: '产品中心', url: '/products' },
  { name: '电子产品', url: '/products/electronics' },
  { name: '智能手机', url: '/products/electronics/smartphones' }
];

// 生成面包屑函数
function generateBreadcrumb(items) {
  const breadcrumb = document.getElementById('dynamicBreadcrumb');
  breadcrumb.innerHTML = '';

  items.forEach((item, index) => {
    const li = document.createElement('li');
    li.className = 'breadcrumb-item';

    if (index === items.length - 1) {
      li.classList.add('active');
      li.setAttribute('aria-current', 'page');
      li.textContent = item.name;
    } else {
      const a = document.createElement('a');
      a.href = item.url;
      a.textContent = item.name;
      li.appendChild(a);
    }

    breadcrumb.appendChild(li);
  });
}

// 调用函数生成面包屑
generateBreadcrumb(breadcrumbData);

最佳实践

使用面包屑导航时，遵循以下最佳实践可以提升用户体验和SEO效果。

面包屑导航最佳实践
  • 保持简洁 - 面包屑路径不宜过长，建议不超过5级
  • 准确反映网站结构 - 面包屑应与网站的实际层级结构一致
  • 使用有意义的标签 - 每个层级应使用清晰、简短的描述
  • 提供可访问性 - 使用适当的ARIA标签和语义化HTML
  • 考虑响应式设计 - 确保在小屏幕上也能良好显示
  • 与导航栏协调 - 面包屑样式应与网站整体设计保持一致

学习完成！

恭喜！您已经掌握了Bootstrap 4面包屑导航的使用方法。面包屑导航是提升网站用户体验和SEO的重要组件。

继续学习下一章：Bootstrap 4 工具类

上一章:Bootstrap4 导航栏 下一章:Bootstrap4 表单