Bootstrap - �麵包屑導航：初學者指南

你好，有抱負的網頁開發者！今天，我們將要深入Bootstrap麵包屑導航的世界。如果你以前從未聽說過麵包屑導航，別擔心 - 到了這個教學的結尾，你將能夠像專業人士一樣創建它！讓我們一起踏上這個令人興奮的旅程。

Bootstrap - Breadcrumb

麵包屑導航是什麼？

在我們進入代碼之前，讓我們先了解麵包屑導航是什麼。想像你正在探索一片廣闊的森林（這就是網際網路有時候會讓人有的感覺）。如果有一串麵包屑來幫助你找到回頭的路，豈不是很好？這正是網頁設計中麵包屑導航的作用！

麵包屑導航是一種導航輔助工具，它向用戶顯示他們在網站結構中的當前位置。它通常在頁面的頂部以一行鏈接的形式顯示，讓用戶能夠輕鬆地導航回到更高級別的頁面。

為什麼使用Bootstrap麵包屑導航？

我們友善的鄰居CSS框架Bootstrap，讓創建麵包屑導航變得非常簡單。它提供了預設樣式的組件，我們可以輕鬆地在我們的網頁中實現。所以，我們不需要重新發明輪子，可以直接使用Bootstrap的現成麵包屑導航，並按照我們的心意進行自定義！

現在，讓我們挽起袖子開始編程吧！

基本麵包屑導航

步驟1：設置Bootstrap

首先，我們需要在HTML文件中包含Bootstrap。在你的HTML的<head>部分添加以下行：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

這將把Bootstrap的CSS和JavaScript文件鏈接到我們的文件。

步驟2：創建基本麵包屑導航

現在，讓我們創建我們的第一個麵包屑導航！這裡是基本結構：

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">首頁</a></li>
<li class="breadcrumb-item"><a href="#">圖書館</a></li>
<li class="breadcrumb-item active" aria-current="page">數據</li>
</ol>
</nav>

讓我們分解這個結構：

我們將麵包屑導航包裹在具有aria-label="breadcrumb"屬性的<nav>元素中。這提高了屏幕閱讀器的無障礙性。
<ol>元素和類別breadcrumb創建了麵包屑容器。
每個<li>元素代表麵包屑層級中的一個級別。
breadcrumb-item類對每個項目進行樣式設置。
最後一個項目具有active類和aria-current="page"屬性，以指示當前頁面。

當你在瀏覽器中查看這個時，你會看到一個整齊的麵包屑導航：首頁 > 圖書館 > 數據

步驟3：添加鏈接

為了讓我們的麵包屑導航具有功能性，我們需要添加正確的鏈接。讓我們修改我們的代碼：

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">首頁</a></li>
<li class="breadcrumb-item"><a href="library.html">圖書館</a></li>
<li class="breadcrumb-item active" aria-current="page">數據</li>
</ol>
</nav>

現在，點擊"首頁"會帶你去index.html，而"圖書館"會帶你去library.html。當前頁面（"數據"）沒有鏈接，因為我們現在就在這裡。

分隔符

默認情況下，Bootstrap使用正斜杠（/）作為麵包屑項目之間的分隔符。但如果我们想要創新並使用其他東西呢？讓我們來探索如何自定義我們的分隔符！

使用CSS自定義分隔符

我們可以使用CSS來更改分隔符。這樣做：

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">首頁</a></li>
<li class="breadcrumb-item"><a href="#">圖書館</a></li>
<li class="breadcrumb-item active" aria-current="page">數據</li>
</ol>
</nav>

在這個例子中，我們將分隔符改為">"符號，使用了--bs-breadcrumb-divider CSS變量。

使用圖標作為分隔符

想要更有創意嗎？讓我們使用圖標作為分隔符！我們將在這個例子中使用Font Awesome圖標：

<!-- 在你的HTML頭部包含Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<!-- 你的麵包屑HTML -->
<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">首頁</a></li>
<li class="breadcrumb-item">
<i class="fas fa-chevron-right"></i>
<a href="#">圖書館</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
<i class="fas fa-chevron-right"></i>
數據
</li>
</ol>
</nav>

在這裡，我們將--bs-breadcrumb-divider設置為空字符串，並手動添加Font Awesome的三角形圖標作為麵包屑項目之間的分隔符。

麵包屑導航最佳實踐

現在你已經知道如何創建和自定義麵包屑導航，讓我們來談談一些最佳實踐：

保持簡單：不要在麵包屑導航中包含每一個單獨的頁面。堅持主要類別。
使用清晰的標籤：確保你的麵包屑標籤簡潔且描述性強。
不要在單層網站上使用麵包屑導航：它們對於具有明確層級的網站最有用。
將它們放在頂部：麵包屑導航通常放在頁面的頂部，主導航下方。

結論

恭喜你！你剛剛學會了如何創建和自定義Bootstrap麵包屑導航。從基本的實現到花哨的分隔符，你现在已經有了引導用戶通過你的網站風格的工具。

記住，麵包屑導航就像是數字森林中的路標。它們幫助用戶理解他們在哪裡，以及如何回到他們之前的位置。明智地使用它們，你的用戶會因為你讓他們在網站中的旅程變得輕鬆而感謝你！

繼續練習，繼續探索，最重要的是，繼續享受網頁開發的樂趣。直到下次見，快樂編程！

方法	描述
基本麵包屑導航	使用`<nav>`、`<ol>`和`<li>`元素以及Bootstrap類別
自定義分隔符	使用`--bs-breadcrumb-divider` CSS變量
圖標分隔符	使用Font Awesome或其他圖標庫
無障礙性	使用`aria-label`和`aria-current`屬性

Credits: Image by storyset