Bootstrap - 表單佈局：初學者指南

你好，有抱負的網頁開發者們！我很興奮能成為你們在Bootstrap表單佈局精彩旅程中的導遊。作為一個教了十多年的計算機科學老師，我見過無數學生在發現Bootstrap的強大和用戶友好性時眼睛發亮。所以，讓我們一起深入探索，解鎖創建有吸引力、響應式的表單的秘訣！

表單佈局基礎

在我們開始編程之前，讓我們假設我們是設計房子的建築師。正如房子需要堅實的基礎和結構，我們的表單也需要一個周密計劃的佈局。Bootstrap為我們提供了有效地建立這些佈局的工具。

容器：表單的基礎

每個偉大的表單都從一個容器開始。在Bootstrap中，我們使用container類來創建一個固定寬度的響應式容器。這裡有一個簡單的例子：

<div class="container">
<form>
<!-- 表單元素將放在這裡 -->
</form>
</div>

這個容器就像是我們房子的地基。它為我們的表單提供了定義的空間，並幫助在不同屏幕尺寸下保持響應性。

工具類：表單設計的瑞士軍刀

Bootstrap的工具類就像網頁設計中的多功能工具。它們是小型、強大的類，能夠快速解決常見的佈局問題。讓我們看看一些對表單佈局非常重要的工具類：

間距工具類

間距工具類幫助我們為表單元素添加外邊距和內邊距。以下是一個快速參考表：

工具類	目的
m-*	添加外邊距
p-*	添加內邊距
mt-*, mb-*, ms-*, me-*	添加到頂部、底部、開始（左）和結束（右）的外邊距
pt-*, pb-*, ps-*, pe-*	添加到頂部、底部、開始（左）和結束（右）的內邊距

讓我們看看這些類在實際中的應用：

<form>
<div class="mb-3">
<label for="name" class="form-label">名稱</label>
<input type="text" class="form-control" id="name">
</div>
<div class="mb-3">
<label for="email" class="form-label">電子郵件</label>
<input type="email" class="form-control" id="email">
</div>
</form>

在這個例子中，mb-3為每個表單組添加到底部的間距，給我們的元素一些空間。

表單網格：建立結構

現在我們有了基礎和工具，讓我們開始使用Bootstrap的網格系統來建立表單的結構。網格系統基於12列佈局，我們可以用它來創建響應式設計。

基本網格佈局

以下是一個簡單的兩列表單佈局示例：

<form>
<div class="row">
<div class="col-md-6">
<label for="firstName" class="form-label">第一名</label>
<input type="text" class="form-control" id="firstName">
</div>
<div class="col-md-6">
<label for="lastName" class="form-label">姓氏</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
</form>

在這個例子中，我們使用row來創建一個水平列組，col-md-6指定每列在中型屏幕和更大屏幕上佔據一半的寬度。

溝槽：給表單一些空間

溝槽是我們網格系統中列與列之間的空間。默認情況下，Bootstrap會為行添加負外邊距，為列添加內邊距以創造這些溝槽。然而，我們可以使用溝槽類來調整它們。

以下是一個帶有自定義溝槽的例子：

<form>
<div class="row g-3">
<div class="col-md-6">
<label for="firstName" class="form-label">第一名</label>
<input type="text" class="form-control" id="firstName">
</div>
<div class="col-md-6">
<label for="lastName" class="form-label">姓氏</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
</form>

g-3類為我們的列添加了一個大小為3（1rem）的溝槽，給表單更多的空間呼吸。

水平表單：不同的視角

有時候，我們希望標籤與輸入框並排。這就是水平表單派上用場的地方。讓我們創建一個：

<form>
<div class="row mb-3">
<label for="email" class="col-sm-2 col-form-label">電子郵件</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email">
</div>
</div>
<div class="row mb-3">
<label for="password" class="col-sm-2 col-form-label">密碼</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password">
</div>
</div>
</form>

在這個例子中，我們使用col-sm-2為標籤和col-sm-10為輸入框，在小型屏幕和更大屏幕上創造一個漂亮的水平佈局。

標籤尺寸調整：尋找合適的尺寸

有時候，我們需要在水平表單中調整標籤的尺寸。Bootstrap讓這件事變得很簡單，我們可以使用尺寸類來做到這一點。以下是如何創建有不同標籤尺寸的表單：

<form>
<div class="row mb-3">
<label for="email" class="col-sm-2 col-form-label col-form-label-sm">電子郵件</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="email">
</div>
</div>
<div class="row mb-3">
<label for="name" class="col-sm-2 col-form-label">名稱</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name">
</div>
</div>
<div class="row mb-3">
<label for="message" class="col-sm-2 col-form-label col-form-label-lg">訊息</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-lg" id="message">
</div>
</div>
</form>

在這裡，我們使用col-form-label-sm、col-form-label和col-form-label-lg分別創造小、默認和大尺寸的標籤。

列尺寸調整：量身定制表單

Bootstrap的網格系統允許我們指定精確的列寬度。這在需要對表單佈局進行精確控制時特別有用。以下是一個例子：

<form>
<div class="row">
<div class="col-2">
<input type="text" class="form-control" placeholder="城市">
</div>
<div class="col-3">
<input type="text" class="form-control" placeholder="州">
</div>
<div class="col-7">
<input type="text" class="form-control" placeholder="郵政編碼">
</div>
</div>
</form>

在這個例子中，我們使用col-2、col-3和col-7來創造一個表單行，其中輸入框佔據特定部分的可用品質。

自動調整尺寸：讓Bootstrap做數學題

有時候，我們希望表單輸入框能夠根據其內容自動調整尺寸。Bootstrap的自动調整尺寸功能使這成為可能。以下是如何操作：

<form class="row gy-2 gx-3 align-items-center">
<div class="col-auto">
<label class="visually-hidden" for="autoSizingInput">名稱</label>
<input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
</div>
<div class="col-auto">
<label class="visually-hidden" for="autoSizingSelect">偏好</label>
<select class="form-select" id="autoSizingSelect">
<option selected>選擇...</option>
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
</select>
</div>
<div class="col-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="autoSizingCheck">
<label class="form-check-label" for="autoSizingCheck">
記住我
</label>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">提交</button>
</div>
</form>

在這個例子中，col-auto類讓每個列根據其內容自調整尺寸。gy-2和gx-3類添加垂直和水平間距，而align-items-center則將每列內容垂直居中。

完整示例：將所有概念整合

現在我們已經涵蓋了這些概念，讓我們將它們整合到一個更複雜的表單中：

<div class="container">
<form class="mt-4">
<div class="row mb-3">
<div class="col-md-6">
<label for="firstName" class="form-label">第一名</label>
<input type="text" class="form-control" id="firstName">
</div>
<div class="col-md-6">
<label for="lastName" class="form-label">姓氏</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="row mb-3">
<div class="col-md-8">
<label for="email" class="form-label">電子郵件</label>
<input type="email" class="form-control" id="email">
</div>
<div class="col-md-4">
<label for="phone" class="form-label">電話</label>
<input type="tel" class="form-control" id="phone">
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label for="address" class="form-label">地址</label>
<input type="text" class="form-control" id="address">
</div>
<div class="col-md-3">
<label for="city" class="form-label">城市</label>
<input type="text" class="form-control" id="city">
</div>
<div class="col-md-3">
<label for="zip" class="form-label">郵政編碼</label>
<input type="text" class="form-control" id="zip">
</div>
</div>
<div class="row mb-3">
<div class="col-12">
<label for="message" class="form-label">訊息</label>
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
</div>
<div class="row">
<div class="col-12">
<button type="submit" class="btn btn-primary">提交</button>
</div>
</div>
</form>
</div>

這個例子結合了我們討論的許多概念：容器、網格佈局、溝槽和響應式設計。它創建了一個在桌面和移動設備上都很出色的表單。

內聯表單：緊湊且高效

對於更簡單的表單或空間有限時，內聯表單可以是一個很好的解決方案。以下是如何創建一個：

<form class="row row-cols-lg-auto g-3 align-items-center">
<div class="col-12">
<label class="visually-hidden" for="inlineFormInputGroupUsername">用戶名</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="用戶名">
</div>
</div>

<div class="col-12">
<label class="visually-hidden" for="inlineFormSelectPref">偏好</label>
<select class="form-select" id="inlineFormSelectPref">
<option selected>選擇...</option>
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
</select>
</div>

<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
記住我
</label>
</div>
</div>

<div class="col-12">
<button type="submit" class="btn btn-primary">提交</button>
</div>
</form>

這個內聯表單使用row-cols-lg-auto在大型屏幕上自動調整列數，創造一個緊湊、水平的佈局。

就是这样，各位！我們已經一起穿行了Bootstrap表單佈局的世界，從基本概念到更高级的技术。記住，熟能生巧，所以不要害怕嘗試這些佈局並讓它們成為你自己的。快樂編程，愿你的表單總是響應式和用戶友好！

Credits: Image by storyset