全面解析Bootstrap表單使用方法（表單控制項狀態）_javascript技巧

這篇文章全面解析了Bootstrap表單的使用方法，本文重點介紹Bootstrap表單控制項狀態的三種情況，有興趣的夥伴們可以參考一下

一、焦點狀態
　　焦點狀態是透過偽類「:focus」來實現。 Bootstrap框架中表單控制項的焦點狀態刪除了outline的預設樣式，重新加入陰影效果。

<form role="form" class="form-horizontal">
 <p class="form-group">
 <p class="col-xs-6">
 <input class="form-control input-lg" type="text" placeholder="不是焦点状态下效果">
 </p>
 <p class="col-xs-6">
 <input class="form-control input-lg" type="text" placeholder="焦点点状态下效果">
 </p>
 </p>
</form>

 

 

 

 

<form role="form">
 <input class="form-control input-lg" id="disabledInput" type="text" placeholder="表单已被禁用，不可输入" disabled>
 <fieldset disabled>
 <p class="form-group">
 <label for="disabledTextInput">禁用的输入框</label>
 <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
 </p>
 <p class="form-group">
 <label for="disabledSelect">禁用的下拉框</label>
 <select id="disabledSelect" class="form-control">
 <option>不可选择</option>
 </select>
 </p>
 <p class="checkbox">
 <label>
 <input type="checkbox"> 无法选择
 </label>
 </p>
 <button type="submit" class="btn btn-primary">提交</button>
 </fieldset>
</form>

 

　　Bootstrap框架的表單控制項的停用狀態和普通的表單停用狀態實作方法是一樣的，在對應的表單控制項上新增屬性「disabled」。

 

三、〜. ，不免要做表單驗證。同樣也需要提供驗證狀態樣式，在Bootstrap框架中同樣提供這幾種效果。

　　1、.has-warning:警告狀態（黃）

　　2、.has-error：錯誤狀態（紅色）

<form role="form">
 <p class="form-group has-success">
 <label class="control-label" for="inputSuccess1">成功状态</label>
 <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
 </p>
 <p class="form-group has-warning">
 <label class="control-label" for="inputWarning1">警告状态</label>
 <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
 </p>
 <p class="form-group has-error">
 <label class="control-label" for="inputError1">错误状态</label>
 <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
 </p>
</form>

　　3、.has-success：成功狀態（綠色）

　　3、.has-success：成功狀態（綠色）

　　使用的時候只需要在form-group容器上對應新增狀態類別名稱

如果如果大家還想深入學習，可以點擊這裡進行學習，再為大家附兩個精彩的專題：Bootstrap學習教程Bootstrap實戰教程以上就是針對Bootstrap表單控件狀態的詳細介紹，之後還有更多內容會不斷更新，希望大家繼續關注。