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中有输入框的话,这个输入框是无法被禁用

  • 相关阅读:
    [转]多个ajax请求时控制执行顺序或全部执行后的操作
    [转]微擎目录结构介绍
    [书目20180702]互联网思维的企业
    [转]Oracle密码过期, 报:ORA-01017: 用户名/口令无效; 登录被拒绝
    [转]VR原理讲解及开发入门
    [转]JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐
    [转]bootstrapValidator.js 做表单验证
    [转]Build beautiful, responsive sites with Bootstrap and ASP.NET Core
    [转]C# Bootstrap table之 分页
    [转]Bootstrap table 分页 In asp.net MVC
  • 原文地址:https://www.cnblogs.com/qingyuan/p/4599116.html
Copyright © 2011-2022 走看看