Bootstrap 4 表單輸入
支援的表單控制元件
Bootstrap 支援以下表單控制元件
- input
- textarea
- checkbox
- 收音機
- select
Bootstrap 輸入框
Bootstrap 支援所有 HTML5 輸入型別：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
注意： 如果未正確宣告輸入型別，則輸入框將無法完全樣式化！
以下示例包含兩個輸入元素；一個 type="text"，一個 type="password"。正如我們在表單章節中提到的，我們使用 .form-control 類來樣式化輸入框，使其具有全寬和適當的內邊距等。
示例
<div class="form-group">
<label for="usr">名稱:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">密碼:</label>
<input type="password" class="form-control" id="pwd">
</div>
自己動手試一試 »
Bootstrap 文字域
以下示例包含一個文字域
示例
<div class="form-group">
<label for="comment">評論:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
自己動手試一試 »
Bootstrap 複選框
複選框用於讓使用者從預設選項列表中選擇任意數量的選項。
以下示例包含三個複選框。最後一個選項已停用。
示例
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">選項 1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">選項 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>選項 3
</label>
</div>
自己動手試一試 »
示例說明
使用帶有 class="form-check" 的包裝元素，以確保標籤和複選框的適當邊距。
為標籤元素新增 .form-check-label 類，為複選框新增 .form-check-input 以在 .form-check 容器內正確樣式化複選框。
內聯複選框
如果您希望複選框顯示在同一行，請使用 .form-check-inline 類。
示例
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">選項 1
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">選項 2
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>選項 3
</label>
</div>
自己動手試一試 »
Bootstrap 單選按鈕
單選按鈕用於將使用者限制為從預設選項列表中僅選擇一個選項。
以下示例包含三個單選按鈕。最後一個選項已停用。
示例
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">選項 1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">選項 2
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>選項 3
</label>
</div>
自己動手試一試 »
與複選框一樣，如果您希望單選按鈕顯示在同一行，請使用 .form-check-inline 類。
示例
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">選項 1
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">選項 2
</label>
</div>
<div class="form-check-inline disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>選項 3
</label>
</div>
自己動手試一試 »
Bootstrap 選擇列表
選擇列表用於允許使用者從多個選項中進行選擇。
以下示例包含一個下拉列表（選擇列表）
示例
<div class="form-group">
<label for="sel1">選擇列表:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
自己動手試一試 »
表單控制元件大小調整
使用 .form-control-sm 或 .form-control-lg 更改表單控制元件的大小。
示例
<input type="text" class="form-control form-control-sm">
<input type="text" class="form-control form-control">
<input type="text" class="form-control form-control-lg">
自己動手試一試 »
帶有純文字的表單控制元件
如果您想將輸入欄位樣式化為純文字，請使用 .form-control-plaintext。
表單控制元件檔案和範圍
為 input type="range" 新增 .form-control-range 類，或為 input type="file" 新增 .form-control-file，以全寬樣式化範圍控制元件或檔案欄位。
示例
<input type="range" class="form-control-range">
<input type="file" class="form-control-file border">
自己動手試一試 »
