一、概要
Bootstrap 提供了下列類型的表單布局
- 垂直表單（默認(rèn)）
- 內(nèi)聯(lián)表單
- 水平表單
二宝惰、基本樣式
1植榕、說明
單獨的表單控件會被自動賦予一些全局樣式。
將
label元素和前面提到的控件包裹在.form-group中可以獲得最好的排列
2尼夺、form-group
- 作用
增加塊元素的下部留白尊残，從而使塊元素的間距變大 - 栗子
<form> <div class="form-group"> <label for="name">用戶名</label> <input type="text" id="name" placeholder="請輸入用戶名"> </div> </form>
3、form-control
- 作用
換行+填充整行 - 栗子
<form> <div class="form-group"> <label for="name">用戶名</label> <input type="text" id="name" class="form-control" placeholder="請輸入用戶名"> </div> <button type="submit">提交</button> </form>
4淤堵、注意
- 只有正確設(shè)置了輸入框的 type 類型寝衫，才能被賦予正確的樣式。
- 包括：text拐邪、password慰毅、、datetime-local扎阶、date汹胃、number、email东臀、url着饥、search、tel 和 color等惰赋。
三宰掉、內(nèi)聯(lián)表單
1、說明
為
<form>元素添加.form-inline類可使其內(nèi)容左對齊并且表現(xiàn)為inline-block級別的控件。只適用于視口至少在 768px 寬度時（視口寬度再小的話就會使表單折疊）
2轨奄、注意事項
- form-inline使帶有form-control和form-group的元素表現(xiàn)出行內(nèi)的效果
- form-inline一定要保證在至少768px的行寬下仇穗，否則會看不到內(nèi)聯(lián)效果
3、示例代碼
<form class="form-inline">
<div class="form-group">
<label for="username">用戶名</label>
<input type="text" class="form-control" id="username" placeholder="請輸入用戶名">
</div>
<div class="form-group">
<label for="pwd">設(shè)置密碼</label>
<input type="text" class="form-control" id="pwd" placeholder="請輸入密碼">
</div>
<div class="form-group">
<label for="pwd1">確認(rèn)密碼</label>
<input type="text" class="form-control" id="pwd1" placeholder="請確認(rèn)密碼">
</div>
<div class="form-group">
<label for="email">郵箱</label>
<input type="email" class="form-control" id="email" placeholder="123456@example.com">
</div>
<button class="btn btn-info">注冊</button>
</form>
</div>
四戚绕、水平排列的表單
1、說明
通過為表單添加
.form-horizontal類枝冀，并聯(lián)合使用 Bootstrap 預(yù)置的柵格類舞丛，可以將label標(biāo)簽和控件組水平并排布局。這樣做將改變.form-group的行為果漾，使其表現(xiàn)為柵格系統(tǒng)中的行（row）球切，因此就無需再額外添加.row了
2、示例代碼
<span class="h1">水平排列</span>
<form class="form-horizontal">
<div class="form-group">
<label for="uname" class="col-sm-2">用戶名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="uname" placeholder="請輸入用戶名">
</div>
</div>
</form>
五绒障、復(fù)選框吨凑、單選框、下拉列表
1 户辱、說明
復(fù)選框（.checkbox）用于選擇列表中的一個或多個選項鸵钝，
單選框（.radio）用于從多個選項中只選擇一個
下拉列表(.select) 用于下拉框的選擇
2 、復(fù)選框(radio)
- 設(shè)置復(fù)選框和文字單獨一行
<div class="checkbox">
<label>
<input type="radio" name="r1" value="1">雞澤明步
</label>
</div>
<div class="checkbox">
<label>
<input type="radio" name="r1" value="2">搏多野見衣
</label>
</div>
- 設(shè)置內(nèi)聯(lián)一行顯示的復(fù)選框
<label class="checkbox-inline"> <input type="checkbox">雞澤明步</label> <label class="checkbox-inline disabled"> <input type="checkbox" disabled>搏多野見衣</label>
3庐镐、單選框
- 單選框和文字獨占一行
<div class="radio"> <label> <input type="radio" name="sex">男</label> </div> <div class="radio"> <label> <input type="radio" name="sex">女</label> </div> - 所有單選框同在一行
<label class="radio-inline"> <input type="radio" id="ick1" value="v1">1 </label> <label class="radio-inline"> <input type="radio" id="ick2" value="v2">2 </label> <label class="radio-inline"> <input type="radio" id="ick3" value="v3">3 </label>
4恩商、下拉列表
- 基本使用
<select class="form-control"> <option>北京</option> <option>上海</option> <option>廣州</option> <option>深圳</option> <option>長沙</option> </select>
六、表單狀態(tài)檢測
任何包含在此元素之內(nèi)的 .control-label必逆、.form-control 等元素都將接受這些校驗狀態(tài)的樣式怠堪。
1、has-warning
- 作用
表單填寫警告 - 栗子
<div class="form-group has-warning"></div>
2名眉、has-error
- 作用
表單填寫錯誤 - 栗子
<div class="form-group has-error"></div>
3粟矿、has-success
- 作用
表單填寫成功 - 栗子
<div class="form-group has-success"></div>
4、標(biāo)簽同步相應(yīng)狀態(tài)
- 作用
一般配合js使用動態(tài)的操作樣式 - 栗子
<form role="form"> <div class="form-group has-success"> <label class="control-label" for="success">成功狀態(tài)</label> <input type="text" class="form-control" id="success" placeholder="成功狀態(tài)"> </div> <div class="form-group has-warning"> <label class="control-label" for="warning">警告狀態(tài)</label> <input type="text" class="form-control" id="warning" placeholder="警告狀態(tài)"> </div> <div class="form-group has-error"> <label class="control-label" for="error">錯誤狀態(tài)</label> <input type="text" class="form-control" id="error" placeholder="錯誤狀態(tài)"> </div> </form>
七损拢、控制尺寸
1陌粹、說明
bootstrap還提供了一些控制表單元素大小的樣式input-lg、input-sm
也可以設(shè)置父元素 form-group-lg福压、form-group-sm申屹，來調(diào)整。
2隧膏、舉個栗子
<input type="text" class="form-control input-lg" value="稍微大一點的">
<input type="text" class="form-control" value="默認(rèn)大小的">
<input type="text" class="form-control input-sm" value="小號輸入框">
