在 Bootstrap 4 中，面包屑导航（Breadcrumb） 是一种常用于表示网站结构层次的导航元素。它通常显示在页面的顶部，帮助用户了解他们当前所在的位置，并提供返回上一层或首页的链接。Bootstrap 提供了 breadcrumb 组件来实现这一功能。

1. 基本面包屑导航

最基本的面包屑导航可以通过 breadcrumb 类和 breadcrumb-item 类来实现。

示例：

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

解释：

  • breadcrumb：是面包屑导航的容器。
  • breadcrumb-item：每个面包屑项的类。
  • active：当前页面的面包屑项，表示用户所在的位置。
  • aria-current="page"：为当前页面的面包屑项添加无障碍标签。

结果：

这将显示类似以下内容的面包屑导航：

Home > Library > Data

2. 面包屑导航的链接和活动项

面包屑导航中的每一项可以是一个链接（<a> 标签），而当前页的面包屑项通常不会是链接，而是一个简单的文本项。

示例：

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Category</a></li>
    <li class="breadcrumb-item active" aria-current="page">Product</li>
  </ol>
</nav>

解释：

  • <a> 标签：面包屑中的每个可点击项，通常用于导航到不同的页面。
  • active：当前活动页面的面包屑项不会是链接，而是一个静态文本，帮助用户确认他们当前所在的位置。

3. 面包屑导航的自定义

你可以通过修改样式，或在面包屑项之间添加图标等，来定制面包屑导航的外观。Bootstrap 4 允许你自定义颜色、间距等。

示例：

<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-dark text-light">
    <li class="breadcrumb-item"><a href="#" class="text-warning">Home</a></li>
    <li class="breadcrumb-item"><a href="#" class="text-warning">Shop</a></li>
    <li class="breadcrumb-item active" aria-current="page">Checkout</li>
  </ol>
</nav>

解释：

  • bg-dark：设置背景颜色为深色。
  • text-light：设置文本颜色为浅色。
  • text-warning：设置特定项的文本颜色为警告色（黄色）。

4. 面包屑导航的无链接项

如果你不希望某些面包屑项是链接，而只是纯文本，可以使用 <span> 标签代替 <a> 标签。

示例：

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Category</a></li>
    <li class="breadcrumb-item"><span>Product</span></li>
  </ol>
</nav>

解释：

  • <span>：用来表示一个纯文本项，用户无法点击。

5. 面包屑导航的嵌套结构

有时，面包屑导航可能需要表示更深层次的结构。在这种情况下，你可以使用嵌套的面包屑导航。

示例：

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item"><a href="#">Data</a></li>
    <li class="breadcrumb-item active" aria-current="page">Analytics</li>
  </ol>
</nav>

解释：

在这个示例中，导航层次逐渐深入，每个面包屑项都会链接到不同的页面。最后一项是当前页面，用户无法点击它。

6. 动态面包屑导航

有时，面包屑项可能需要根据不同的条件动态生成。例如，可以通过服务器端渲染或 JavaScript 动态生成面包屑导航。

示例：

<script>
  const breadcrumbItems = [
    { name: "Home", link: "#" },
    { name: "Category", link: "#" },
    { name: "Product", link: null }
  ];

  let breadcrumbHtml = '<ol class="breadcrumb">';
  breadcrumbItems.forEach(item => {
    if (item.link) {
      breadcrumbHtml += `<li class="breadcrumb-item"><a href="${item.link}">${item.name}</a></li>`;
    } else {
      breadcrumbHtml += `<li class="breadcrumb-item active" aria-current="page">${item.name}</li>`;
    }
  });
  breadcrumbHtml += '</ol>';

  document.getElementById('breadcrumb-container').innerHTML = breadcrumbHtml;
</script>

<div id="breadcrumb-container"></div>

解释：

  • 通过 JavaScript 动态生成面包屑项，可以根据应用程序的状态或数据源灵活控制面包屑导航的内容。

总结

  • breadcrumb 组件在 Bootstrap 4 中用于表示页面的导航路径。
  • 使用 breadcrumb-item 来表示每一项，当前页面项使用 active 类。
  • 面包屑导航是非常有用的，尤其是在具有多层页面结构的应用程序中，它帮助用户了解他们在网站中的位置。
  • 可以通过 aria-label="breadcrumb" 来增强可访问性，确保屏幕阅读器能够正确解析面包屑导航。

希望这些示例能帮助你更好地理解和使用 Bootstrap 4 的面包屑导航组件！