Bootstrap系列 -- 20. 禁用狀態

 

　　Bootstrap框架的表單控件的禁用狀態和普通的表單禁用狀態實現方法是一樣的，在相應的表單控件上添加屬性“disabled”

　　在使用了“form-control”的表單控件中，樣式設置了禁用表單背景色為灰色，而且手型變成了不准輸入的形狀。如果控件中不使用類名“form-control”，禁用的控件只會有一個不准輸入的手型出來

 

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

 

　　

<h3>示例1</h3>
<form role="form" class="form-horizontal">
  <div class="form-group">
    <div class="col-xs-6">
      <input class="form-control input-lg" type="text" placeholder="不是焦點狀態下效果">
    </div>
    <div class="col-xs-6">
      <input class="form-control input-lg" id="disabledInput" type="text" placeholder="表單已被禁用，不可輸入" disabled>
    </div>
  </div> 
</form> 
<br>
<br>
<br>
<h3>示例2</h3>   
<form role="form">
  <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"> 無法選擇
      </label>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </fieldset>
</form> 
<br>
<br>
<br>
<h3>示例3</h3>
<form role="form">
  <fieldset disabled>
    <legend><input type="text" class="form-control" placeholder="顯然我顏色變灰了，但是我沒被禁用，不信？單擊試一下" /></legend>
    <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"> 無法選擇
      </label>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </fieldset>
</form>  

 

　　整個禁用的域中，如果legend中有輸入框的話，這個輸入框是無法被禁用的