Bootstrap 组件 Breadcrumb（面包屑）

Breadcrumb(面包屑)

面包屑是用来干嘛的呢？指示导航层次结构中当前页面的位置，导航层次结构通过CSS自动添加分隔符。
就是指示现在页面在导航栏中的层级目录的位置。

演示代码

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

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

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

改变分隔符号

分隔符号自动被添加在css中的::before 和content 。
它们可以被$breadcrumb-divider 改变。
需要quote函数来生成字符串周围的引号，因此，如果您希望>作为分隔符，可以使用以下命令:

$breadcrumb-divider: quote(">");

也有可能用于一个base64嵌入的svg Icon。

分隔符可以被删除，通过以下的语句：

$breadcrumb-divider: quote(">");

可访问性

因为面包屑提供导航,它是一个好主意来添加一个有意义的标签如 aria-label="breadcrumb"来描述类型的导航提供的

元素,以及应用一个 aria-current=“page” 的最后一项表明,它代表了当前页面。