Bootstrap - 徽章示範

徽章是什麼？

你好，未來的網頁開發者們！今天，我們將要進入Bootstrap徽章的精彩世界。作為你們親切友善的電腦老師，我將帶領你們走過這段旅程，即使你們之前從未寫過一行代碼。所以，拿好你們的虛擬背包，讓我們一起踏上這次冒險吧！

Bootstrap - Badges Demo

在Bootstrap中，徽章就像是可以添加到你網頁上的數字貼紙。它是一個小型的，通常是圓形或錢包狀的元素，用於突出或顯示額外的信息。把它看作是你手機應用程序上那些小通知泡沐的網頁版——它們吸引眼球且充滿信息！

真實世界的比喻

想像你正在穿著童軍制服。你袖子上的徽章代表了你的成就，對吧？Bootstrap徽章在數位世界中也有相似的作用。它們可以顯示數字（如未讀消息）、狀態（新，特價等），或簡單地為你的網頁添加視覺興趣。

Bootstrap徽章的開始

在我們投入代碼之前，讓我們先確保我們已經設置好了Bootstrap。別擔心；這比在露營旅行中搭帳篷要容易！

設置Bootstrap

要使用Bootstrap，我們需要在HTML中包含其CSS和JavaScript文件。下面是如何操作的：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 徽章示範</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 你的內容放在這裡 -->

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

這就像為我們的徽章表演設置舞臺。我們已經鏈接到Bootstrap的CSS和JavaScript文件，這給我們提供了所有Bootstrap的優勢，包括徽章。

基本徽章使用

現在，我們已經一切就緒，讓我們創建我們的第一個徽章！

簡單徽章範例

<h1>歡迎來到我的博客 <span class="badge bg-secondary">新</span></h1>

在這個例子中，我們在標題旁邊添加了一個徽章。<span>元素加上類別badge和bg-secondary創建了一個簡單的灰色徽章，顯示文字"新"。

解釋

<span>: 這是一個內聯容器，用於標記文本的一部分。
class="badge": 這個Bootstrap類將我們的span轉換成徽章。
bg-secondary: 這為我們的徽章添加了一個灰色背景。

徽章顏色

Bootstrap為你的徽章提供了彩虹般的顏色。讓我們來探索它們！

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

這些徽章各有不同的顏色，非常適合傳達不同的含義或只是讓你的頁面更加豐富多彩！

顏色含義表

顏色	常規用途
主要	主要操作或信息
次要	較不重要的信息
成功	正面操作或消息
危險	警告或錯誤消息
警告	警告性信息
信息	中性信息消息
亮色	微妙的背景或較少強調
深色	高對比或重要的信息

錢包狀徽章

想要讓你的徽章看起來更圓一些嗎？來認識一下錢包狀徽章！

<span class="badge rounded-pill bg-primary">錢包狀徽章</span>

通過添加rounded-pill類，我們將我們的常規徽章轉變成了錢包狀。這就像給你的徽章來了一次大變身！

按鈕中的徽章

徽章還可以用在按鈕中以創造一些非常酷的效果。我們來試試看：

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

這創建了一個說"消息"的按鈕，並帶有一個顯示數字4的小徽章。這對於顯示未讀消息數等非常適合！

定位徽章

有時候，你希望你的徽章相對於另一個元素定位。Bootstrap讓這樣的操作變得很簡單，有了定位徽章：

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

這創建了一個按鈕，其徽章定位在右上角，與按鈕稍微重疊。這就像你按鈕甜筒上的櫻桃！

分析

position-relative: 使按鈕成為徽章的定位上下文。
position-absolute: 在按鈕內絕對定位徽章。
top-0 start-100: 將徽章定位在右上角。
translate-middle: 將徽章移動以達到更好的視覺對齊。
visually-hidden: 為屏幕閱讀器提供文本，而不在視覺上顯示。

結論

好了，各位！我們已經穿越了Bootstrap徽章的土地，從簡單的彩色徽章到錢包狀徽章，再到按鈕上的定位徽章。記住，徽章就像是你的網頁設計配方中的調味料——明智地使用它們，為你的頁面添加恰到好處的味道！

熟練使人完美，所以不要害怕嘗試不同的組合。誰知道呢？你可能會用你創造性的徽章使用創造出下一個網頁設計的大趨勢！

開心編程，願你的徽章永遠明亮，你的工具提示總是充滿信息！

Credits: Image by storyset