天天看點

Bootstrap4 表單

在本章中,我們将學習如何使用 Bootstrap 建立表單。Bootstrap 通過一些簡單的 HTML 标簽和擴充的類即可建立出不同樣式的表單。

表單元素 <input>, <textarea>, 和

<select> elements

在使用 .form-control 類的情況下,寬度都是設定為 100%。

堆疊表單 (全屏寬度):垂直方向

内聯表單:水準方向

Bootstrap 提供了兩種類型的表單布局:

以下執行個體使用兩個輸入框,一個複選框,一個送出按鈕來建立堆疊表單:

<form>

<div class="form-group">

<label for="email">Email address:</label>

<input type="email" class="form-control" id="email">

</div>

<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>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

所有内聯表單中的元素都是左對齊的。

注意:在螢幕寬度小于 576px 時為垂直堆疊,如果螢幕寬度大于等于576px時表單元素才會顯示在同一個水準線上。

内聯表單需要在 <form> 元素上添加 .form-inline類。

以下執行個體使用兩個輸入框,一個複選框,一個送出按鈕來建立内聯表單:

<form class="form-inline">