4 bootstrap4組件——麪包屑導航

在通過BootStrap的內置CSS樣式，自動添加分隔符、並呈現導航層次和網頁結構，從而指示當前頁面的位置爲訪客創造優秀用戶體驗。

1、基本結構

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">首頁</a></li>
    <li class="breadcrumb-item"><a href="#">web前端</a></li>
    <li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
  </ol>
</nav>

.breadcrumb：標記爲麪包屑導航
.breadcrumb-item：標記爲麪包屑導航內容項
.active：表示當前頁面（高亮）
aria-label="breadcrumb"：針對麪包屑這樣具備導航功能的模塊，添加一個有意義的標籤來描述
元素
aria-current=“page”：這組導航的最後一個項目，以標明當前頁面名稱（路徑）

2、分隔符原理

分隔符通過::before和自動添加到CSS中content.

.breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  color: #6c757d;
  content: "/";
}

可以通過重置CSS中的content屬性值，如果你想>爲分隔符，你可以添加如下CSS樣式：

.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  }