首頁 > web前端 > js教程 > 全面解析Bootstrap表單使用方法(表單控制項狀態)_javascript技巧

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

PHP中文网
發布: 2016-05-16 15:30:20
原創
1514 人瀏覽過

這篇文章全面解析了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表單控件狀態的詳細介紹,之後還有更多內容會不斷更新,希望大家繼續關注。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板