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

时间: 2017-12-19

Bootstrap系列 -- 20. 禁用状态的相关文章

Bootstrap系列 -- 19. 焦点状态

  表单主要用来与用户沟通,好的表单就能更好的与用户进行沟通,而好的表单一定离不开表单的控件状态.   表单状态的作用: 每一种状态都能给用户传递不同的信息,比如表单有焦点的状态可以告诉用户可以输入或选择东西,禁用状态可以告诉用户不可以输入或选择东西,还有就是表单控件验证状态,可以告诉用户的操作是否正确等.那么在Bootstrap框架中的表单控件也具备这些状态. 焦点状态是通过伪类":focus"来实现.Bootstrap框架中表单控件的焦点状态删除了outline的默认样式,重新添加

第20章 状态模式(State Pattern)

原文 第20章 状态模式(State Pattern) 状态模式        概述:           当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类.         状态模式主要解决的是当控制一个对象状态的条件表达式过于复杂时的情况.把状态的判断逻辑转移到表示不同状态的一系列类中,可以把复杂的判断逻辑简化.        意图:          允许一个对象在其内部状态改变时改变它的行为        结构图:                 举例:      

jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法_jquery

本文实例讲述了jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法.分享给大家供大家参考,具体如下: 方法很简单,我们只需要在数据加载成功后的事件中处理即可.具体代码如下所示: //事件 onLoadSuccess: function (data) { //模拟测试加载成功后数据Id大于20的都勾选中,并禁用checkbox for (var i = 0; i < data.rows.length; i++) { if (data.rows[i].Id > 20)

Bootstrap系列 -- 22. 按钮详解

    Bootstrap框架首先通过基础类名".btn"定义了一个基础的按钮风格,然后通过".btn-default"定义了一个默认的按钮风格.默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色.边框颜色和文本颜色. <button type="button" class="btn btn-default">基本样式</button>   几种不同样式风格的按钮 <button cl

网站、应用交互设计分析:禁用状态二三事

前言 禁用,顾名思义,代表不可用的意思.有一个禁用,就一定对应着一个可用.不论是表单,还是复杂性管理界面,抑或是分步引导,这些场景中都有可能出现禁用状态,而如何合理运用禁用状态,让它成为体验的加分项而不是减分项,正是设计师要不断思考.深入实践的.这里抛一些砖出来,希望和大家一起探讨. "这个不可点的按钮放在这里很鸡肋,我们是不是可以考虑去掉?" "默认放出按钮吧,不能点也没关系,不然用户怎么了解产品中有哪些功能?" 禁用状态可看为应用程序机制对外暴露的一个直接体现,

MSSQL 18052错误: 9003,严重度: 20,状态: 1

  问题现象: 系统日志文件(控制面板–管理工具–系统日志) 能找到以下两条错误: 17052: 无法恢复 master 数据库.正在退出. 18052: 错误: 9003,严重度: 20,状态: 1. 解决方法一: 将Microsoft SQL Server/MSSQL/Data 目录改名为data_bak目录,然后从其他机器上把master.mdf,master.ldf,model.mdf,modellog.ldf拷过来随便放到哪(或者直接把data目录拷过来也行),不能放到Microsof

win7系统My Wifi功能显示禁用状态无法启用怎么办?

win7系统My Wifi功能显示禁用状态无法启用怎么办?下面一起看看详细解决方法. 解决方法: 1.首先要检查设备管理器,然后直接开启Microsoft Virtual Wifi Miniport Adpter.如果里面有Microsoft Virtual Wifi Miniport Adpter#2的话,也要及时开启; 2.开启My Wifi功能的时候,本机的无线也要及时进行开启.如果电脑上面已经连接上了有线网络,那么无线就不要处于连接状态,及时把无线连接断开; 3.之后再开启即可.

vmware workstation-vmware tools 处于禁用状态

问题描述 vmware tools 处于禁用状态 解决方案 vmware版本是多少.是不是低了.

sql server启动不了, MSSQL 18052错误: 9003,严重度: 20,状态: 1 ._MsSql

问题现象: 系统日志文件(控制面板–管理工具–系统日志) 能找到以下两条错误: 17052: 无法恢复 master 数据库.正在退出. 18052: 错误: 9003,严重度: 20,状态: 1. 解决方法一: 将Microsoft SQL Server/MSSQL/Data 目录改名为data_bak目录,然后从其他机器上把master.mdf,master.ldf,model.mdf,modellog.ldf拷过来随便放到哪(或者直接把data目录拷过来也行),不能放到Microsoft