Bootstrap - 按鈕群組：初學者指南

Hello, 有志於網頁開發的同學們！今天，我們將進入Bootstrap按鈕群組的精彩世界。作為你們親切友善的電腦老師，我非常興奮能夠帶領你們走這段旅程。別擔心如果你從來沒有寫過一行代碼——我們會從基礎開始，逐步學習。讓我們開始吧！

按鈕群組是什麼？

在深入代碼之前，讓我們先了解按鈕群組是什麼。想像你正在為電視製作遙控器。而不是將所有按鈕散佈在各處，你會將相似的按鈕分組。這就是我們在網頁設計中對按鈕群組所做的！

Bootstrap的按鈕群組讓我們能將相關的按鈕聚集在一起，創造出更有組織且視覺上吸引人的界面。這就像給你的按鈕一個舒適的小家，讓它們能夠和諧共處。

基本範例

讓我們從一個簡單的範例開始，熱熱身：

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

這段代碼創建了一組標籤為"左"、"中"和"右"的三個按鈕。讓我們來分解一下：

1. 我們將按鈕包裹在一個帶有btn-group類的<div>中。
2. role="group"屬性幫助螢幕閱讀器理解這些按鈕是相關的。
3. aria-label為按鈕群組提供了一個描述。
4. 每個<button>都有btn和btn-primary類，這給它們提供了Bootstrap按鈕的樣式。

當你運行這段代碼時，你會看到三個藍色按鈕緊緊相依，就像豆莢中的豆子！

混合樣式

現在，讓我們來點刺激的。在現實世界中，並非所有按鈕都是一樣的。有些比其他更重要，我們可以從視覺上顯示這一點：

<div class="btn-group" role="group" aria-label="混合樣式">
<button type="button" class="btn btn-danger">刪除</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-success">批准</button>
</div>

在這個範例中，我們使用了不同的Bootstrap顏色類：

• btn-danger對於紅色的"刪除"按鈕
• btn-warning對於黃色的"警告"按鈕
• btn-success對於綠色的"批准"按鈕

這創造了一組視覺上引人注目的按鈕，每個按鈕都根據其功能進行顏色編碼。這就像是你網頁上的交通燈！

輪廓樣式

有時候，你希望你的按鈕更為微妙。這就是輪廓樣式派上用場的地方：

<div class="btn-group" role="group" aria-label="輪廓樣式">
<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-info">資訊</button>
</div>

使用btn-outline-*而不是btn-*，我們得到帶有顏色邊框和文字但背景透明的按鈕。它們在設計中提供了一種更輕鬆的觸感。

勾選框和單選按鈕群組

現在，讓我們來點更有互動性的東西。Bootstrap允許我們創建行為像勾選框或單選按鈕的按鈕群組：

<div class="btn-group" role="group" aria-label="基本勾選框切換按鈕群組">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck1">勾選框 1</label>

<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck2">勾選框 2</label>

<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck3">勾選框 3</label>
</div>

這段代碼創建了一組三個行為像勾選框的按鈕。你可以點擊多個按鈕，它們會保持"按下的"狀態，直到你再次點擊它們。這就像在你的按鈕群組中有一個待辦事項列表！

按鈕工具欄

有時候，你需要將你的按鈕群組進行分組。這就是按鈕工具欄派上用場的地方：

<div class="btn-toolbar" role="toolbar" aria-label="帶有按鈕群組的工具欄">
<div class="btn-group me-2" role="group" aria-label="第一組">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
</div>
<div class="btn-group me-2" role="group" aria-label="第二組">
<button type="button" class="btn btn-secondary">4</button>
<button type="button" class="btn btn-secondary">5</button>
</div>
<div class="btn-group" role="group" aria-label="第三組">
<button type="button" class="btn btn-info">6</button>
</div>
</div>

這創建了一個帶有三個按鈕群組的工具欄。這就像組織你的廚房用具——叉子在一個抽屜，湯匙在另一個，而你阿姨送的那個奇怪的玩具在它自己的特殊位置。

尺寸

就像人一樣，按鈕也有各種尺寸。Bootstrap讓你很容易調整整個按鈕群組的大小：

<div class="btn-group btn-group-lg" role="group" aria-label="大型按鈕群組">
<button type="button" class="btn btn-outline-dark">左</button>
<button type="button" class="btn btn-outline-dark">中</button>
<button type="button" class="btn btn-outline-dark">右</button>
</div>

通過將btn-group-lg添加到容器中，我們使所有按鈕變得更大。你也可以使用btn-group-sm來製作小型按鈕。這就像Goldilocks——你可以找到剛剛好的尺寸！

嵌套

有時候，你需要一個按鈕群組內部的按鈕群組。Bootstrap為你提供了支持：

<div class="btn-group" role="group" aria-label="帶有嵌套下拉菜單的按鈕群組">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>

<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
下拉菜單
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#">下拉鏈接</a></li>
<li><a class="dropdown-item" href="#">下拉鏈接</a></li>
</ul>
</div>
</div>

這創建了一個帶有兩個普通按鈕和一個下拉按鈕的按鈕群組。這就像那些俄羅斯套娃，但用的是按鈕！

垂直變體

最後但同樣重要的是，讓我們將事物轉向一邊，使用垂直按鈕群組：

<div class="btn-group-vertical" 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>
<button type="button" class="btn btn-primary">按鈕</button>
<button type="button" class="btn btn-primary">按鈕</button>
</div>

使用btn-group-vertical而不是btn-group，我們將按鈕垂直堆疊。這在你想讓按鈕形成塔而不是線時非常適合！

結論

好了，各位！我們已經穿越了Bootstrap按鈕群組的領地，從基本範例到垂直變體。記住，熟練來自練習，所以不要害怕嘗試這些範例。混合和搭配不同的樣式、尺寸和佈局，為你的項目創造完美的按鈕群組。

網頁開發是關於創造力和問題解決，按鈕群組只是你手邊的許多工具之一。持續學習，持續編程，最重要的是，玩得開心！下次見，快樂編程！

Credits: Image by storyset