Bootstrap - 表單選擇

你好，未來的網頁開發者們！今天，我們將要深入Bootstrap表單選擇元素的奇妙世界。作為你們親切友善的鄰居電腦老師，我很興奮能夠帶領你們開始這個旅程。如果你從未寫過一行代碼，也不用擔心 - 我們會從最基礎的知識開始，然後逐步學習。所以，來一杯咖啡（或者如果你喜歡，來一杯茶），我們開始吧！

Bootstrap - Select

Bootstrap表單選擇是什麼？

在我們進行代碼編寫之前，讓我們先了解Bootstrap表單選擇是什麼。想像你在一個冰淇淋店，你有一個菜單可以選擇。那個菜單就像是網頁設計中的選擇元素。它使用戶能夠從許多選項中選擇一個。Bootstrap，我們在網頁開發中的可靠助手，讓這些選擇元素在不同的設備和瀏覽器上都能看起來很棒且運作順暢。

預設的Bootstrap選擇

讓我們從最基礎的Bootstrap選擇開始。這是它的樣子：

<select class="form-select" aria-label="預設選擇範例">
<option selected>打開這個選單</option>
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
</select>

現在，讓我們來分解這個代碼：

我們從<select>標籤開始，這告訴瀏覽器我們正在創建一個下拉菜單。
class="form-select"是Bootstrap的魔法，它會將我們的選擇美觀地設計。
aria-label是為了無障礙性，幫助螢幕閱讀器理解這個元素的目的。
在<select>內部，我們有<option>標籤。這些是我們下拉菜單中的選項。
第一個選項上的selected屬性使其成為默認選擇。

當你使用這段代碼時，你會看到一個時尚的下拉菜單，其中有四個選項。酷炫吧？

示例：喜歡的編程語言

讓我們用一個真實世界的例子來讓這個更有趣。想像我們正在創建一個關於喜歡的編程語言的調查：

<select class="form-select" aria-label="選擇你喜歡的編程語言">
<option selected>選擇你喜歡的語言</option>
<option value="python">Python</option>
<option value="javascript">JavaScript</option>
<option value="java">Java</option>
<option value="csharp">C#</option>
</select>

這會創建一個下拉菜單，使用戶可以選擇他們喜歡的編程語言。這就像問你的朋友們他們喜歡哪種冰淇淋口味，但這是給程序員的！

尺寸：讓事物變大（或變小）

有時候，你可能希望你的選擇更大或更小。Bootstrap為你準備了！這裡有三個尺寸選項：

示例：大型選擇

<select class="form-select form-select-lg mb-3" aria-label="大型選擇範例">
<option selected>打開這個選單</option>
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
</select>

form-select-lg類使這個選擇比默認的大。

示例：預設選擇

<select class="form-select mb-3" aria-label="預設選擇範例">
<option selected>打開這個選單</option>
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
</select>

這是我們的標準尺寸，就像我們之前看到的一樣。

示例：小型選擇

<select class="form-select form-select-sm" aria-label="小型選擇範例">
<option selected>打開這個選單</option>
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
</select>

form-select-sm類創建一個更小的選擇元素。

將這些想像成快餐店裡的小杯、中杯和大杯飲料。你選擇最適合你設計的尺寸！

禁用：當選項不在菜單上

有時候，你可能希望阻止用戶與選擇元素進行交互。也許這對他們來說不適用，或者它可能取決於他們還沒有做出的另一個選擇。這就是disabled屬性派上用場的地方。

示例：禁用選擇

<select class="form-select" aria-label="禁用選擇範例" disabled>
<option selected>打開這個選單（但你不能！）</option>
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
</select>

將disabled添加到<select>標籤中會使整個下拉菜單變灰，阻止任何交互。這就像在我們之前提到的冰淇淋店上放置一個"休息"標誌。

組合所有內容

現在我們已經介紹了基礎知識，讓我們創建一個更複雜的表單，使用不同類型的選擇：

<form>
<div class="mb-3">
<label for="programmingLanguage" class="form-label">喜歡的編程語言</label>
<select class="form-select form-select-lg" id="programmingLanguage">
<option selected>選擇你喜歡的語言</option>
<option value="python">Python</option>
<option value="javascript">JavaScript</option>
<option value="java">Java</option>
<option value="csharp">C#</option>
</select>
</div>

<div class="mb-3">
<label for="experience" class="form-label">經驗年數</label>
<select class="form-select" id="experience">
<option selected>選擇你的經驗</option>
<option value="1">少於1年</option>
<option value="2">1-3年</option>
<option value="3">3-5年</option>
<option value="4">5+年</option>
</select>
</div>

<div class="mb-3">
<label for="futureLanguage" class="form-label">你想學習的下一種語言</label>
<select class="form-select form-select-sm" id="futureLanguage" disabled>
<option selected>首先，選擇你喜歡的語言</option>
<option value="rust">Rust</option>
<option value="go">Go</option>
<option value="kotlin">Kotlin</option>
<option value="swift">Swift</option>
</select>
</div>
</form>

這個表單結合了我們學到的所有內容：

一個大型選擇，用於選擇喜歡的編程語言
一個預設尺寸的選擇，用於經驗年數
一個小型且禁用的選擇，用於未來學習的語言（想像它在選擇了喜歡的語言後變得可用）

結論

這就是你們了，夥伴們！你剛剛學會了如何創建和定制Bootstrap表單選擇元素。從基本下拉菜單到尺寸調整和禁用選項，你现在有了創建有用户友好的表單的工具，這些表單在任何設備上都看起來很棒。

記住，熟能生巧。嘗試創建你自己的表單，混合和匹配不同的尺寸，並實驗禁用狀態。在你知道之前，你將像專業人士一樣設計表單！

祝你有個愉快的編程，並願你的選擇永遠時尚且功能強大！

Credits: Image by storyset

上一教程:

Bootstrap - 表單控制

下一教程:

Bootstrap - 核取方塊和單選按鈕