6g下載網
當前位置: 主頁 > 軟件教程 > 編程開發 >

Bootstrap如何禁用表單控件?Bootstrap禁用表單控件的方法

時間: 2016-09-07 13:32 來源: 本站整理

分享到:

今天小編整理一篇Bootstrap如何禁用表單控件?Bootstrap禁用表單控件的方法的文章和大家分享,希望能給大家提供幫助。

Bootstrap框架的表單控件的禁用狀態和普通的表單禁用狀態實現方法是一樣的,在相應的表單控件上添加屬性“disabled”。禁用單個表單標簽,只需要在標簽的屬性中加入disabled。

Bootstrap禁用表單控件的方法源代碼如下:

  1. <form role="form" class="form-horizontal"> 
  2.   <div class="form-group"> 
  3.     <div class="col-xs-6"> 
  4.       <input class="form-control input-lg" id="disabledInput" type="text" placeholder="表單已被禁用,不可輸入" disabled> 
  5.     </div> 
  6.   </div>   
  7. </form>  

Bootstrap禁用表單控件效果圖:

Bootstrap如何禁用表單控件?Bootstrap禁用表單控件的方法

在Bootstrap框架中,如果fieldset設置了disabled屬性,整個域都將處于被禁用狀態。

Bootstrap禁用整個域源代碼:

  1. <form role="form"> 
  2.   <fieldset disabled> 
  3.     <div class="form-group"> 
  4.       <label for="disabledTextInput">禁用的輸入框</label> 
  5.       <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入"> 
  6.     </div> 
  7.     <div class="form-group"> 
  8.       <label for="disabledSelect">禁用的下拉框</label> 
  9.       <select id="disabledSelect" class="form-control"> 
  10.         <option>不可選擇</option> 
  11.       </select> 
  12.     </div> 
  13.     <div class="checkbox"> 
  14.       <label> 
  15.         <input type="checkbox"> 無法選擇  
  16.       </label> 
  17.     </div> 
  18.     <button type="submit" class="btn btn-primary">提交</button> 
  19.   </fieldset> 
  20. </form>  

Bootstrap禁用整個域效果圖:

Bootstrap如何禁用表單控件?Bootstrap禁用表單控件的方法

據說對于整個禁用的域中,如果legend中有輸入框的話,這個輸入框是無法被禁用的。

  1. form role="form"> 
  2.   <fieldset disabled> 
  3.     <legend><input type="text" class="form-control" placeholder="顯然我顏色變灰了,但是我沒被禁用,不信?單擊試一下" /></legend> 
  4.     <div class="form-group"> 
  5.       <label for="disabledTextInput">禁用的輸入框</label> 
  6.       <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入"> 
  7.     </div> 
  8.     <div class="form-group"> 
  9.       <label for="disabledSelect">禁用的下拉框</label> 
  10.       <select id="disabledSelect" class="form-control"> 
  11.         <option>不可選擇</option> 
  12.       </select> 
  13.     </div> 
  14.     <div class="checkbox"> 
  15.       <label> 
  16.         <input type="checkbox"> 無法選擇  
  17.       </label> 
  18.     </div> 
  19.     <button type="submit" class="btn btn-primary">提交</button> 
  20.   </fieldset> 
  21. </form>   

效果圖:

Bootstrap如何禁用表單控件?Bootstrap禁用表單控件的方法

Bootstrap如何禁用表單控件?Bootstrap禁用表單控件的方法的文章和大家分享結束,感謝閱讀!

(責任編輯:6g下載網)
標簽:Bootstrap 表單

分享到:

------分隔線----------------------------
? 35选7福利彩票