Bootstrap - 按鈕範例

你好，未來的編程超級巨星！今天，我們將進入Bootstrap按鈕的奇妙世界。作為你親切友善的鄰居計算機老師，我將帶領你一步一步地走過這趟旅程。所以，拿起你喜歡的飲料，放鬆身心，讓我們一起踏上這個令人興奮的冒險吧！

Bootstrap - Buttons Demo

Bootstrap按鈕是什麼？

在我們深入細節之前，讓我們先來討論一下Bootstrap按鈕到底是什麼。想像你正在蓋房子。牆壁和屋頂是你的HTML結構，油漆是你的CSS，那麼Bootstrap呢？這就像有一個神奇的工具箱，讓一切變得更容易、更美觀。Bootstrap按鈕是預先設計好的、準備好使用的按鈕，你可以輕鬆地將它們添加到你的網頁中。

Bootstrap入門

首先，我們需要設置我們的Bootstrap實驗場。別擔心，這比設置一場大富翁遊戲還要容易！

步驟 1：設置HTML結構

讓我們從基本的HTML結構開始：

<!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>
<div class="container mt-5">
<!-- 我們的按鈕將放在這裡 -->
</div>

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

這就像在繪畫之前設定你的畫布。我們已經包含了Bootstrap的CSS和JS文件，這讓我們可以使用所有Bootstrap的好東西。

基本Bootstrap按鈕

現在，讓我們在頁面上添加一些按鈕！

<button type="button" class="btn btn-primary">主要</button>
<button type="button" class="btn btn-secondary">次要</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-danger">危險</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-info">資訊</button>
<button type="button" class="btn btn-light">淺色</button>
<button type="button" class="btn btn-dark">深色</button>

這裡是每個類別的作用：

btn：這是所有Bootstrap按鈕的基本類別。
btn-primary、btn-secondary等：這些類別定義了按鈕的顏色和樣式。

按鈕大小

就像你在快餐店可以選擇不同大小的薯條一樣，Bootstrap按鈕也有不同的尺寸！

<button type="button" class="btn btn-primary btn-lg">大型按鈕</button>
<button type="button" class="btn btn-primary">默認按鈕</button>
<button type="button" class="btn btn-primary btn-sm">小型按鈕</button>

btn-lg：使按鈕變大
btn-sm：使按鈕變小

輪廓按鈕

有時候，你想要一個更含蓄的按鈕。這就是輪廓按鈕派上用場的時候！

<button type="button" class="btn btn-outline-primary">主要</button>
<button type="button" class="btn btn-outline-secondary">次要</button>
<button type="button" class="btn btn-outline-success">成功</button>

btn-outline-*類別給你帶有顏色邊框和透明背景的按鈕。

塊狀按鈕

如果你需要一個佔滿其父元素全寬的按鈕，塊狀按鈕就是你的好夥伴！

<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">塊狀按鈕</button>
<button class="btn btn-primary" type="button">塊狀按鈕</button>
</div>

父div上的d-grid類別和gap-2類別在按鈕之間添加了一些間距。

按鈕狀態

按鈕可以有不同的狀態，就像我們有不同的情緒一樣！

<button type="button" class="btn btn-primary">正常按鈕</button>
<button type="button" class="btn btn-primary active">活動按鈕</button>
<button type="button" class="btn btn-primary" disabled>禁用按鈕</button>

active類別使按鈕看起來被按下了。
disabled屬性使按鈕不可點擊。

切換按鈕

切換按鈕就像開關一樣 - 它們可以是開或關！

<button type="button" class="btn btn-primary" data-bs-toggle="button">切換按鈕</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">活動切換按鈕</button>

data-bs-toggle="button"屬性啟用了切換功能。

按鈕組

有時候，按鈕喜歡聚集在一起。這就是按鈕組派上用場的時候！

<div class="btn-group" role="group" aria-label="基本範例">
<button type="button" class="btn btn-primary">左</button>
<button type="button" class="btn btn-primary">中</button>
<button type="button" class="btn btn-primary">右</button>
</div>

btn-group類別將按鈕分組在一起。

下拉按鈕

下拉按鈕就像驚喜盒子 - 點擊它們，更多的選項就會出現！

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
下拉按鈕
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">動作</a></li>
<li><a class="dropdown-item" href="#">另一個動作</a></li>
<li><a class="dropdown-item" href="#">在這裡有其他東西</a></li>
</ul>
</div>

dropdown-toggle類別和data-bs-toggle="dropdown"屬性啟用了下拉功能。

結論

恭喜你！你剛剛完成了Bootstrap按鈕的旋風之旅。記住，熟練來自練習，所以不要害怕嘗試不同的組合。誰知道呢？你可能會創造出網頁設計的下一個大熱門！

這裡是我們討論過的所有按鈕類別的快速參考表：

類別	描述
btn	基本按鈕類別
btn-primary	主要顏色按鈕
btn-secondary	次要顏色按鈕
btn-success	成功顏色按鈕
btn-danger	危險顏色按鈕
btn-warning	警告顏色按鈕
btn-info	資訊顏色按鈕
btn-light	淺色按鈕
btn-dark	深色按鈕
btn-lg	大型按鈕
btn-sm	小型按鈕
btn-outline-*	輪廓按鈕
active	活動狀態按鈕
disabled	禁用按鈕
data-bs-toggle="button"	切換按鈕
btn-group	按鈕組
dropdown-toggle	下拉按鈕

快樂編程，願Bootstrap與你同在！

Credits: Image by storyset