Bootstrap - 漂浮標籤：初學者的全面指南

你好，有抱負的網頁開發者們！今天，我們將深入Bootstrap的漂浮標籤世界。作為你們親切友善的鄰居計算機老師，我很興奮能夠引導你們進行這次旅行。別擔心你們對編程還是新手——我們會一步一步來，不久之後，你們就會像專業人士一樣漂浮標籤！

Bootstrap - Floating Labels

漂浮標籤是什麼？

在我們開始之前，讓我們了解一下漂浮標籤是什麼。想像你正在填寫一個表單，當你開始輸入時，每個輸入框的標籤神奇地漂浮到字段上方。這就是漂浮標籤的精髓！它們提供了一個乾淨、直觀的用戶界面，節省空間，並且看起來非常酷炫。

基本範例

讓我們從一個基本範例開始，來濕一下我們的腳：

<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
<label for="floatingInput">電子郵件地址</label>
</div>

這裡發生了什麼？讓我們分解一下：

我們將輸入和標籤包裹在一個帶有form-floating類的div中。
input在前，label在後（這個順序很重要！）
我們為輸入添加了一個placeholder，Bootstrap會用來確定標籤的大小。

當你聚焦於輸入框或開始輸入時，標籤會優雅地漂浮到輸入框上方。這就像魔法一樣，但其實只是巧妙的CSS！

文本區域

漂浮標籤不僅適用於簡單的輸入。它們對於文本區域也非常有用：

<div class="form-floating">
<textarea class="form-control" placeholder="在這裡留下評論" id="floatingTextarea"></textarea>
<label for="floatingTextarea">評論</label>
</div>

這個範例與我們的基本範例工作原理相同，但使用的是textarea而不是input。當你需要用戶輸入較長文本時，這個非常完美！

下拉選單

那麼下拉菜單呢？Bootstrap為你們提供了支持：

<div class="form-floating">
<select class="form-select" id="floatingSelect" aria-label="Floating label select example">
<option selected>打開這個選單</option>
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
</select>
<label for="floatingSelect">與下拉菜單配合使用</label>
</div>

當選擇一個選項時，漂浮標籤會出現。這是一種讓你的表單在不同輸入類型之間保持一致性的好方法。

禁用

有時候，你可能需要禁用一個輸入框。以下是如何做到這一點，同時保留漂浮標籤：

<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInputDisabled" placeholder="[email protected]" disabled>
<label for="floatingInputDisabled">電子郵件地址 (已禁用)</label>
</div>

只需為你的輸入添加disabled屬性，Bootstrap會相應地設置樣式。

只讀純文本

如果你想要顯示一些不可更改的信息，該怎麼辦？這裡有 readonly plaintext：

<div class="form-floating mb-3">
<input type="email" class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="[email protected]" readonly>
<label for="floatingEmptyPlaintextInput">空輸入</label>
</div>

這創建了一個不可編輯的字段，但仍能從漂浮標籤樣式中受益。

輸入組

漂浮標籤還可以用於輸入組，以創建更複雜的表單佈局：

<div class="input-group mb-3">
<span class="input-group-text">$</span>
<div class="form-floating">
<input type="text" class="form-control" id="floatingInputGroup1" placeholder="用戶名">
<label for="floatingInputGroup1">數額</label>
</div>
</div>

這個範例將輸入組（美元符號前綴）與漂浮標籤輸入結合起來。

佈局

最後，讓我們看看如何將這些漂浮標籤輸入以響應式網格佈局排列：

<div class="row g-2">
<div class="col-md">
<div class="form-floating">
<input type="email" class="form-control" id="floatingInputGrid" placeholder="[email protected]">
<label for="floatingInputGrid">電子郵件地址</label>
</div>
</div>
<div class="col-md">
<div class="form-floating">
<select class="form-select" id="floatingSelectGrid">
<option selected>打開這個選單</option>
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
</select>
<label for="floatingSelectGrid">與下拉菜單配合使用</label>
</div>
</div>
</div>

這創建了一個兩列佈局，在小屏幕上會垂直堆疊。

組合所有元素

現在我們已經介紹了漂浮標籤的所有這些不同方面，讓我們創建一個小表單，將所有這些元素結合起來：

<form class="container mt-5">
<h2>聯繫我們</h2>
<div class="row g-3">
<div class="col-md-6">
<div class="form-floating">
<input type="text" class="form-control" id="floatingName" placeholder="John Doe">
<label for="floatingName">全名</label>
</div>
</div>
<div class="col-md-6">
<div class="form-floating">
<input type="email" class="form-control" id="floatingEmail" placeholder="[email protected]">
<label for="floatingEmail">電子郵件地址</label>
</div>
</div>
<div class="col-12">
<div class="form-floating">
<select class="form-select" id="floatingSelect">
<option selected>選擇一個話題</option>
<option value="1">一般詢問</option>
<option value="2">技術支持</option>
<option value="3">反饋</option>
</select>
<label for="floatingSelect">話題</label>
</div>
</div>
<div class="col-12">
<div class="form-floating">
<textarea class="form-control" placeholder="在這裡留下評論" id="floatingTextarea" style="height: 100px"></textarea>
<label for="floatingTextarea">評論</label>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">提交</button>
</div>
</div>
</form>

這個表單將我們討論過的所有元素結合起來：輸入框、下拉菜單和文本區域，所有這些都有漂浮標籤，並以響應式網格佈局排列。

結論

這就是 Bootstrap 的漂浮標籤的來龍去脈，各位！我們已經涵蓋了從基本輸入到複雜佈局的所有內容，現在你有了創建有品味、用戶友好的表單的工具，這些表單會讓你的用戶印象深刻，並讓你的網站脫穎而出。

記住，熟練是需要練習的。試著實驗這些範例，將不同的元素混合搭配，看看你能創造出什麼。在你知道之前，你將會像有經驗的網頁開發者一樣漂浮標籤！

祝開發愉快，願你的標籤總是優雅地漂浮！

Credits: Image by storyset