Bootstrap - 動章：為您的網頁元素添加魅力

Hello, 動手開發網頁的各位！今天，我們將要進入Bootstrap動章的精彩世界。作為您友好的鄰居電腦老師，我會帶領大家一步一步地走過這個旅程。所以，拿起您最喜歡的飲料，放鬆身心，讓我們一起踏上這個冒險！

動章是什麼？

動章是小的計數和標籤組件，可以為您的網頁元素添加額外信息。它們就像微小的數字貼紙，可以使您的網站更具信息性和視覺吸引力。想像一下，您正在創建一個社交媒體平台，並想要顯示用戶有多少未讀消息 - 這就是動章派上用場的地方！

基本動章範例

我們從一個簡單的範例開始：

<h1>歡迎來到 MySpace 2.0 <span class="badge bg-secondary">新</span></h1>

在這個範例中，我們在標題旁邊添加了一個動章。span元素帶有badge和bg-secondary類別創造了一個小型的灰色動章，上面寫著"新"。這就像在商店的產品上貼上"新！"的貼紙一樣 - 它吸引了注意力！

動章實戰

與按鈕一起使用的動章

動章可以與按鈕一起使用，以提供額外信息。這裡有一個範例：

<button type="button" class="btn btn-primary">
通知 <span class="badge bg-secondary">4</span>
</button>

這段代碼創建了一個寫著"通知"的按鈕，並帶有一個顯示數字4的小型動章。這對於顯示用戶有多少未讀通知非常適合！

用於通知的動章

提到通知，讓我們看看如何使用動章來創建一個通知圖標：

<i class="bi bi-bell-fill position-relative">
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">未讀消息</span>
</span>
</i>

這段代碼創建了一個帶有紅色動章的鐘形圖標，顯示"99+"。visually-hidden的span是為了屏幕閱讀器設計的，使我們的網站更具無障礙性。

定位動章

動章可以以多種方式定位。讓我們看看一些範例：

<button type="button" class="btn btn-primary position-relative">
收件箱
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">未讀消息</span>
</span>
</button>

這段代碼將動章定位在按鈕的右上角。這就像在書角上貼上一張便利貼一樣！

動章作為指示器

動章也可以作為指示器使用：

<button type="button" class="btn btn-primary position-relative">
個人資料
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">新通知</span>
</span>
</button>

這創建了一個帶有紅色小點的按鈕指示器 - 非常適合用於顯示有新內容，而不需要指定數字。

自定義動章顏色

Bootstrap提供了多種背景顏色供動章使用。這裡有一個類別表：

類別	描述
bg-primary	藍色動章
bg-secondary	灰色動章
bg-success	綠色動章
bg-danger	紅色動章
bg-warning	黃色動章
bg-info	淺藍色動章
bg-light	白色動章
bg-dark	黑色動章

您可以使用這些類別如下：

<span class="badge bg-primary">主要</span>
<span class="badge bg-secondary">次要</span>
<span class="badge bg-success">成功</span>
<span class="badge bg-danger">危險</span>
<span class="badge bg-warning text-dark">警告</span>
<span class="badge bg-info text-dark">資訊</span>
<span class="badge bg-light text-dark">亮色</span>
<span class="badge bg-dark">深色</span>

胶囊形動章

如果您希望動章有圓形的末端，可以使用rounded-pill類別：

<span class="badge rounded-pill bg-primary">主要</span>
<span class="badge rounded-pill bg-secondary">次要</span>
<span class="badge rounded-pill bg-success">成功</span>

這些膠囊形動章非常適合用作標籤或標記！

所有內容整合

現在，我們已經涵蓋了所有這些概念，讓我們創建一個更複雜的範例，它整合了多種動章類型：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">MySpace 2.0</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">
主頁
<span class="badge bg-primary rounded-pill">新</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link position-relative" href="#">
消息
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">未讀消息</span>
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link position-relative" href="#">
通知
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-success border border-light rounded-circle">
<span class="visually-hidden">新通知</span>
</span>
</a>
</li>
</ul>
</div>
</nav>

這段代碼創建了一個導航欄，有三個項目：主頁（帶有"新"動章）、消息（帶有計數動章）和通知（帶有指示器動章）。這就像為飛船創建一個控制面板 - 每個動章都為用戶提供了一目了然的重要信息！

至於各位，我們已經探索了Bootstrap動章的世界，從簡單的標籤到複雜的通知。記住，與任何網頁開發工具一樣，關鍵在於謹慎使用動章。它們很適合吸引注意力，但太多會使您的網站看起來雜亂無章。

在我們結束之前，我想到一位學生曾經說過："動章就像杯子蛋糕上的 sprinkles 一樣 - 它們使一切更有趣！" 我完全同意。所以，勇於嘗試，為您的網站添加一些動章的風采吧！

Credits: Image by storyset