Bootstrap4 表單控件
Bootstrap4 表單控件
Bootstrap4 支持以下表單控件：
- input
- textarea
- checkbox
- radio
- select
Bootstrap Input
Bootstrap 支持所有的 HTML5 輸入類型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color。
注意：: 如果 input 的 type 屬性未正確聲明，輸入框的樣式將不會顯示。
以下實例使用兩個 input 元素，一個是 text，一個是 password ：
實例
<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 textarea
以下實例演示了 textarea 的樣式。
實例
<div class="form-group">
<label for="comment">評論:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
嘗試一下 »
Bootstrap 復選框(checkbox)
復選框用於讓用戶從一系列預設置的選項中進行選擇，可以選一個或多個。
以下實例包含了三個選項。最後一個是禁用的：
實例
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
嘗試一下 »
使用 .form-check-inline 類可以讓選項顯示在同一行上：
實例
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check form-check-inline disabled">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
嘗試一下 »
Bootstrap 單選框(Radio)
單選框用於讓用戶從一系列預設置的選項中進行選擇，只能選一個。
以下實例包含了三個選項。最後一個是禁用的：
實例
<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Option 3</label>
</div>
嘗試一下 »
使用 .radio-inline 類可以讓選項顯示在同一行上：
實例
<label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>
嘗試一下 »
Bootstrap select 下拉菜單
當您想讓用戶從多個選項中進行選擇，但是默認情況下只能選擇一個選項時，則使用選擇框。
以下實例包含了兩個下拉菜單：
實例
<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>
嘗試一下 »