Bootstrap系列 -- 20. 禁用狀態

賀臣發表於2015-06-25
boot

 

　　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中有輸入框的話，這個輸入框是無法被禁用的

相關文章