Bootstrap4 表單
Bootstrap4 表單
在本章中，我們將學習如何使用 Bootstrap 創建表單。Bootstrap 通過一些簡單的 HTML 標籤和擴展的類即可創建出不同樣式的表單。
表單元素 <input>, <textarea>, 和 <select> elements 在使用 .form-control 類的情況下，寬度都是設置為 100%。
Bootstrap4 表單布局
- 堆叠表單 (全屏寬度)：垂直方向
- 內聯表單：水平方向
Bootstrap 提供了兩種類型的表單布局:
堆叠表單
以下實例使用兩個輸入框，一個復選框，一個提交按鈕來創建堆叠表單：
實例
<form>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
嘗試一下 »
內聯表單
所有內聯表單中的元素都是左對齊的。
注意：在屏幕寬度小於 576px 時為垂直堆叠，如果屏幕寬度大於等於576px時表單元素才會顯示在同一個水平線上。
內聯表單需要在 <form> 元素上添加 .form-inline類。
以下實例使用兩個輸入框，一個復選框，一個提交按鈕來創建內聯表單：
實例
<form class="form-inline">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
嘗試一下 »