快捷導(dǎo)航

全面解析Bootstrap表單使用方法（表單控件狀態(tài)）

更新時(shí)間：2015年11月24日 09:52:19 作者：傻籽

這篇文章全面解析了Bootstrap表單的使用方法，本文重點(diǎn)介紹Bootstrap表單控件狀態(tài)的三種情況，感興趣的小伙伴們可以參考一下

一、焦點(diǎn)狀態(tài)
　　焦點(diǎn)狀態(tài)是通過(guò)偽類“:focus”來(lái)實(shí)現(xiàn)。Bootstrap框架中表單控件的焦點(diǎn)狀態(tài)刪除了outline的默認(rèn)樣式，重新添加陰影效果。

<form role="form" class="form-horizontal">
 <div class="form-group">
 <div class="col-xs-6">
 <input class="form-control input-lg" type="text" placeholder="不是焦點(diǎn)狀態(tài)下效果">
 </div>
 <div class="col-xs-6">
 <input class="form-control input-lg" type="text" placeholder="焦點(diǎn)點(diǎn)狀態(tài)下效果">
 </div>
 </div>
</form>

二、禁用狀態(tài)
　　Bootstrap框架的表單控件的禁用狀態(tài)和普通的表單禁用狀態(tài)實(shí)現(xiàn)方法是一樣的，在相應(yīng)的表單控件上添加屬性“disabled”。

<form role="form">
 <input class="form-control input-lg" id="disabledInput" type="text" placeholder="表單已被禁用，不可輸入" disabled>
 <fieldset disabled>
 <div class="form-group">
 <label for="disabledTextInput">禁用的輸入框</label>
 <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入">
 </div>
 <div class="form-group">
 <label for="disabledSelect">禁用的下拉框</label>
 <select id="disabledSelect" class="form-control">
 <option>不可選擇</option>
 </select>
 </div>
 <div class="checkbox">
 <label>
 <input type="checkbox"> 無(wú)法選擇
 </label>
 </div>
 <button type="submit" class="btn btn-primary">提交</button>
 </fieldset>
</form>

三、驗(yàn)證狀態(tài)
　　在制作表單時(shí)，不免要做表單驗(yàn)證。同樣也需要提供驗(yàn)證狀態(tài)樣式，在Bootstrap框架中同樣提供這幾種效果。
　　1、.has-warning:警告狀態(tài)（黃色）
　　2、.has-error：錯(cuò)誤狀態(tài)（紅色）
　　3、.has-success：成功狀態(tài)（綠色）
　　使用的時(shí)候只需要在form-group容器上對(duì)應(yīng)添加狀態(tài)類名

<form role="form">
 <div class="form-group has-success">
 <label class="control-label" for="inputSuccess1">成功狀態(tài)</label>
 <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態(tài)" >
 </div>
 <div class="form-group has-warning">
 <label class="control-label" for="inputWarning1">警告狀態(tài)</label>
 <input type="text" class="form-control" id="inputWarning1" placeholder="警告狀態(tài)">
 </div>
 <div class="form-group has-error">
 <label class="control-label" for="inputError1">錯(cuò)誤狀態(tài)</label>
 <input type="text" class="form-control" id="inputError1" placeholder="錯(cuò)誤狀態(tài)">
 </div>
</form>