基本的表單結構時BootStrap自帶的,建立基本表單的步驟以下:css
<form>
元素添加role = 「form」
;div.form-group
中,div放在父form下;<input>
、<textarea>
和<select>
添加.form-control
<!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta charset="utf-8"> <!-- 引入 Bootstrap --> <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <form role="form"> <div class="form-group"> <label for="name">名稱</label> <input type="text" class="form-control" id="name" name="name-text" placeholder="請輸入你的名稱"> </div> </form> <!-- jQuery (Bootstrap 的 JavaScript 插件須要引入 jQuery) --> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <!-- 包括全部已編譯的插件 --> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
添加了form-control
Class的input會和label分爲兩行,而且得到焦點時會有藍色的邊框樣式。html
內聯表單中全部的元素都是內聯的,標籤都是並排的jquery
<form>
標籤中添加classfrom-inline
;div.form-group
,checkbox能夠包含在div.checkbox
,radio能夠包含在div.radio
;input
、select
和textarea
有100%寬度,使用內聯表單時,能夠設置表單控件的寬度來設置;sr-only
能夠隱藏標籤描述。<!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta charset="utf-8"> <!-- 引入 Bootstrap --> <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <form class="form-inline" role="form"> <div class="form-group"> <label class = "sr-only" for="name">名稱</label> <input type="text" class="form-control" id="name" name="name-text" placeholder="請輸入你的名稱" style="width: 170px"> </div> <div class="form-group"> <input type="file" name="inputfile" style="width: 170px"> </div> <label> <input type="checkbox" class="checkbox">請打勾 </label> </form> <!-- jQuery (Bootstrap 的 JavaScript 插件須要引入 jQuery) --> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <!-- 包括全部已編譯的插件 --> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
<form>
添加類form-horizontal
;div,form-group
的<div>
中;control-label
.<!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta charset="utf-8"> <!-- 引入 Bootstrap --> <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!--父元素添加form-horizontal類--> <form class="form-horizontal" role="form"> <!--標籤和控件放在一個帶有 class .form-group 的 <div> 中--> <div class="form-group"> <!--向標籤添加 class .control-label。--> <label for="username" class="col-sm-2 control-label">名字:</label> <!--控制表單的寬度--> <div class="col-sm-3"> <input type="text" class="form-control" id="username" placeholder="請輸入用戶名"> </div> </div> <div class="form-group"> <label for="password" class="col-sm-2 control-label">密碼:</label> <div class="col-sm-3"> <input type="password" class="form-control" id="password" placeholder="請輸入密碼"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox">請記住我 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">登陸</button> </div> </div> </form> <!-- jQuery (Bootstrap 的 JavaScript 插件須要引入 jQuery) --> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <!-- 包括全部已編譯的插件 --> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
bootstrap支持常見的表單控件,主要是input,textarea,checkbox,radio和select。ios
Bootstrap提供了對全部原生的HTML5的input類型的支持,包括:text
、password
、datetime
、datetime-local
、date
、month
、time
、week
、number
、url
、search
、tel
、color
。bootstrap
須要進行多行的輸入時,則可使用文本框textarea。必要時改變rows屬性(較少的行 = 較少的盒子,較多的行 = 較多的盒子)。佈局
<label class="checkbox-inline"> <input type="radio" name="optionsRadiosinline" id="optionsRaios1" value="option1" >選項1 </label> <label class="checkbox-inline"> <!--設置checked屬性來表示默認被選中--> <input type="radio" name="optionsRadiosinline" id="optionsRaios2" value="option2" checked="">選項2 </label>
想讓用戶從多個選項中進行選擇,可是默認的狀況下只能選擇一個選項時,則使用選擇框url
<select>
展現列表選項當在一個水平表單標籤後放置純文本時,在<p>
上使用form-control-static
spa
disable
屬性,就會禁用輸入框,還會改變輸入框的樣式和鼠標懸停的樣式。<fieldset>
添加disable屬性來禁用<fieldset>
內的全部控件。has-waring
,
has-error
,
has-success
便可使用驗證狀態。
<form class="form-horizontal" role="form"> <div class="form-group"> <label for="inputPassword" class="col-sm-2 control-label">禁用</label> <div class="col-sm-10"> <!--經過對<input>標籤簡單的添加disbale屬性,就能禁止該控件--> <input class="form-control" id="disabledInput" type="text" placeholder="該輸入框禁止輸入..." disabled> </div> </div> <!--對<fieldset>添加disabled屬性禁用<fieldset>內的全部組件--> <fieldset disabled> <div class="form-group"> <label for="disabledTextInput" class="col-sm-2 control-label">禁用輸入(Fieldset disabled)</label> <div class="col-sm-10"> <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入"> </div> </div> <div class="form-group"> <label for="disabledSelect" class="col-sm-2 control-label">禁用選擇菜單(Fieldset disabled)</label> <div class="col-sm-10"> <select id="disabledSelect" class="form-control"> <option>禁止選擇</option> </select> </div> </div> </fieldset> <!--對父元素添加has-success類用於成功消息的驗證樣式--> <div class="form-group has-success"> <label class="col-sm-2 control-label" for="inputSuccess">輸入成功</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputSuccess"> </div> </div> <!--對父元素添加has-warning類用於警告消息的驗證樣式--> <div class="form-group has-warning"> <label class="col-sm-2 control-label" for="inputWarning">輸入警告</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputWarning"> </div> </div> <!--對父元素添加has-error類用錯誤消息的驗證樣式--> <div class="form-group has-error"> <label class="col-sm-2 control-label" for="inputError">輸入錯誤</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputError"> </div> </div> </form>
使用input-lg
(lg能夠替換成md、sm下同)和col-lg-*
來設置表單的高度和寬度。插件
表單控件能夠在輸入框上有一個塊級的幫助文本,爲了添加一個佔用整個寬度的內容快, 在input
後使用help-block
。code
<form role="form"> <span>幫助文本實例</span> <input class="form-control" type="text"> <p class="help-block">一個較長的文本,超過一行,須要擴展到下一行</p> </form>