zoukankan      html  css  js  c++  java
  • 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中有输入框的话,这个输入框是无法被禁用

  • 相关阅读:
    华为OJ机试训练(一)
    mount CIFS return ERR -12 and report Cannot allocate memory
    ftk学习记(icon篇)
    使用jquery-mockjax模拟ajax请求做前台測试
    Objective-C 内存管理之 _ARC
    [LeetCode]Decode Ways
    设计模式六大原则——迪米特法则(LoD)
    ACM/ICPC2014鞍山现场赛E hdu5074Hatsune Miku
    2015届校园招聘笔试/面试 基础知识点 总结
    依据Path取Json指定节点的值
  • 原文地址:https://www.cnblogs.com/qingyuan/p/4599116.html
Copyright © 2011-2022 走看看