表單
表單控制項用 form-control、form-select、form-check 統一外觀,對應官方 Forms。標籤的 for 要對上輸入框的 id,點文字才能聚焦欄位。
<form>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="you@example.com">
</div>
<div class="mb-3">
<label for="topic" class="form-label">主題</label>
<select class="form-select" id="topic">
<option>一般詢問</option>
<option>報名</option>
</select>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="agree">
<label class="form-check-label" for="agree">我已閱讀條款</label>
</div>
<button type="submit" class="btn btn-primary">送出</button>
</form>
欄位之間用 mb-3 留白,就是 間距 的日常用法。兩欄並排時把欄位放進 row + col-md-6,不要再用已移除的 form-row。
前綴/後綴(例如輸入框左邊的 @)用 Input group。驗證樣式見官方 Validation。
推薦影音
來源:The Net Ninja 約 14 分鐘
示範 label、control、select、textarea 與 input group 搭配圖示。