Bootstrap 4 面包屑导航（Breadcrumb）

Bootstrap 4的面包屑导航（Breadcrumb）是一种类别地图的导航方式，可以让用户了解自己进入网站的路径、在何处以及如何返回。本文将详细介绍如何使用Bootstrap 4的面包屑导航。

基本用法

使用Bootstrap 4的面包屑导航，可以通过以下的代码实现：

<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>

在以上的代码中，<ol>元素包含了一个class为breadcrumb的<li>元素列表。每个<li>元素都表示一个面包屑导航里的一个元素。每一个面包屑导航元素包含一个<a>标签，可以通过点击该标签返回到前面的页面。最后一个面包屑导航元素不需要包含<a>标签，直接使用active的class即可。效果如下图所示：

面包屑导航样式

在Bootstrap 4的面包屑导航中，每一个面包屑导航元素都有默认的样式。如果需要修改样式，可以使用以下的class：

• breadcrumb：作用于面包屑导航顶层的<ol>元素。
• breadcrumb-item：作用于面包屑导航的每一个元素。
• active：作用于面包屑导航的最后一个元素，用于表示当前页面。

例如，如果需要给面包屑导航在上方增加一个边距，可以使用以下的class：

<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>

.breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}

面包屑导航的尺寸

Bootstrap 4的面包屑导航提供了以下的尺寸大小：

• breadcrumb-lg：大尺寸
• breadcrumb-sm：小尺寸

例如，如果需要使用大尺寸的面包屑导航，可以使用以下的代码：

<ol class="breadcrumb breadcrumb-lg">
  <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>

同样地，如果需要使用小尺寸的面包屑导航，可以使用以下的代码：

<ol class="breadcrumb breadcrumb-sm">
  <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>

自定义分隔符

在默认情况下，Bootstrap 4的面包屑导航中使用“/”作为分隔符。如果需要使用不同的分隔符，可以使用以下的方式：

<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>
  <li class="breadcrumb-item separator">></li>
  <li class="breadcrumb-item active">Subdata</li>
</ol>

.breadcrumb .separator {
    display: inline-block;
    padding: 0 5px;
}

其中，通过添加一个具有样式的<li>元素，可以插入一个自定义分隔符。在这里，我们使用了一个separator类，并添加了padding，使分隔符与面包屑导航的其他元素之间留有间隔。

总结

Bootstrap 4的面包屑导航（Breadcrumb）是一种非常实用的导航方式，能够让用户快速了解自己在网站上的位置，以及如何返回。本文详细介绍了如何使用Bootstrap 4的面包屑导航，并提供了一些常用的样式和尺寸。希望这篇文章能够帮助您更好地使用Bootstrap 4的面包屑导航。