Bootstrap4 面包屑导航（Breadcrumb）

发布日期: 2020-08-16

更新日期: 2021-07-19

文章字数: 539

阅读时长: 2 分

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

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: "/";
}

上述代码解释：

这里使用的是相邻选择器，首先选择了class为breadcrumb-item的元素，然后利用相邻选择器选择了除了第一个breadcrumb-item之外的所有breadcrumb-item元素。因为是相邻选择器，第一个breadcrumb-item相邻的是第二个breadcrumb-item元素，这样依次进行相邻选择，那么第一个就无法被选中。

CSS中，**::before** 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。

/* Add a heart before links */
a::before {
  content: "♥";
}

注意: 由::before 和::after 生成的伪元素包含在元素格式框内，因此不能应用在*替换元素上，* 比如<img>或<br> 元素。

Bootstrap4 面包屑导航实例

<ol class="breadcrumb">
    <li class="breadcrumb-item active">Home</li>
</ol>
<ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active">Library</li>
</ol>
<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">Data</li>
</ol>

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

<nav class="breadcrumb">
    <a class="breadcrumb-item" href="#">Home</a>
    <a class="breadcrumb-item" href="#">Library</a>
    <a class="breadcrumb-item" href="#">Data</a>
    <span class="breadcrumb-item active">Bootstrap</span>
</nav>