Bootstrap4 面包屑导航学习笔记

什么是面包屑导航

面包屑导航（Breadcrumbs）是一种辅助导航的方式，它可以告诉用户当前所处位置以及如何返回上一级或其他级别的页面。通常采用一系列链接的形式展示，组成一个层级结构，从而方便用户快速定位到自己想要的页面。

Bootstrap4 中的面包屑导航

在 Bootstrap4 中，我们可以很容易地创建一个面包屑导航，只需要使用 .breadcrumb 类即可。该类可以直接应用于 ol 或 ul 标签，然后添加面包屑导航项（<li>）。

以下是一个简单的例子：

htmlCopy Code
<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 active" aria-current="page">当前页面</li>
  </ol>
</nav>

这个示例包含三个面包屑导航项，分别为“首页”、“分类”和“当前页面”。其中，“当前页面”被标记为活动状态，即 active 类被添加到该 <li> 标签中，并通过 aria-current 属性指示。

我们还可以在面包屑导航项中添加图标、文本甚至表单元素等。

面包屑导航的作用

面包屑导航不仅可以提高网站的用户体验，还可以帮助搜索引擎更好地理解网站页面的结构和层次关系。因此，在进行网站设计时，将面包屑导航添加到页面的合适位置，可以为用户提供更好的导航体验。

总结：Bootstrap4 中的面包屑导航是一种实现辅助导航的有效方式，它的作用是方便用户快速定位到自己想要的页面，并且有助于搜索引擎更好地理解网站页面的结构和层次关系。