Bootstrap4 表單

在本章中，我們將學(xué)習(xí)如何使用 Bootstrap 創(chuàng)建表單。Bootstrap 通過(guò)一些簡(jiǎn)單的 HTML 標(biāo)簽和擴(kuò)展的類即可創(chuàng)建出不同樣式的表單。

表單元素 <input>, <textarea>, 和 <select> elements 在使用 .form-control 類的情況下，寬度都是設(shè)置為 100%。

Bootstrap4 表單布局

堆疊表單 (全屏寬度)：垂直方向
內(nèi)聯(lián)表單：水平方向

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

堆疊表單

以下實(shí)例使用兩個(gè)輸入框，一個(gè)復(fù)選框，一個(gè)提交按鈕來(lái)創(chuàng)建堆疊表單：

實(shí)例

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

運(yùn)行代碼 ?

內(nèi)聯(lián)表單

所有內(nèi)聯(lián)表單中的元素都是左對(duì)齊的。

注意：在屏幕寬度小于 576px 時(shí)為垂直堆疊，如果屏幕寬度大于等于576px時(shí)表單元素才會(huì)顯示在同一個(gè)水平線上。

內(nèi)聯(lián)表單需要在 <form> 元素上添加 .form-inline類。

以下實(shí)例使用兩個(gè)輸入框，一個(gè)復(fù)選框，一個(gè)提交按鈕來(lái)創(chuàng)建內(nèi)聯(lián)表單：

實(shí)例

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

運(yùn)行代碼 ?

上一篇：Bootstrap4 面包屑導(dǎo)航下一篇：Bootstrap4 表單控件