面包屑导航(Breadcrumb)

在通过BootStrap的内置CSS样式，自动添加分隔符、并呈现导航层次和网页结构结构，从而指示当前页面的位置为访客创造优秀用户体验。

概览

分隔符号是通过::before 和 content两个方法定义添加的。

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

无障碍处理

为了为障碍浏览提供方便，针对面包屑这样具备导航功能的模块，建议添加一个有意义的标签即aria-label="breadcrumb"來描述<nav>元素，以及使用 aria-current="page"到这组导航的最后一个项目，以标明当前页面名称（路径）

更多信息，敬请参阅 WAI-ARIA Authoring Practices for the breadcrumb pattern（面包屑导航的无障碍研究）。