Bootstrap 表单控件状态(禁用状态)
Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的,在相应的表单控件上添加属性“disabled”。和其他表单的禁用状态不同的是,Bootstrap框架做了一些样式风格的处理:
使用方法为:只需要在需要禁用的表单控件上加上“disabled”即可:
<input class="form-control" type="text" placeholder="表单已禁用,不能输入" disabled>
运行效果如下或查看右侧结果窗口:
在使用了“form-control”的表单控件中,样式设置了禁用表单背景色为灰色,而且手型变成了不准输入的形状。如果控件中不使用类名“form-control”,禁用的控件只会有一个不准输入的手型出来。
在Bootstrap框架中,如果fieldset设置了disabled属性,整个域都将处于被禁用状态。
<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="btnbtn-primary">提交</button>
</fieldset>
</form>
运行效果如下或查看右侧结果窗口:
据说对于整个禁用的域中,如果legend中有输入框的话,这个输入框是无法被禁用的。我们一起来验证一下:
<form role="form">
<fieldset disabled>
<legend><input type="text" class="form-control" placeholder="显然我颜色变灰了,但是我没被禁用,不信?单击试一下" /></legend>
…
</fieldset>
</form>
运行效果如下或查看右侧结果窗口:
Bootstrap 表单控件状态(禁用状态)的更多相关文章
- Bootstrap 表单控件状态(验证状态)
在制作表单时,不免要做表单验证.同样也需要提供验证状态样式,在Bootstrap框架中同样提供这几种效果.1..has-warning:警告状态(黄色)2..has-error:错误状态(红色)3.. ...
- Bootstrap历练实例:表单控件状态(禁用的字段集fieldset)
禁用的字段集 fieldset 对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件. <!DOCTYPE html>& ...
- Bootstrap历练实例:表单控件状态(禁用)
禁用的输入框 input 如果您想要禁用一个输入框 input,只需要简单地添加 disabled 属性,这不仅会禁用输入框,还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式. < ...
- Bootstrap中表单控件状态(验证状态)
Bootstrap 表单 http://www.runoob.com/try/try2.php?filename=bootstrap3-form-controlstate (这链接里有简介) &l ...
- Bootstrap之表单控件状态
Bootstrap中的表单控件状态主要有三种:焦点状态,禁用状态,验证状态. 一.焦点状态:该状态告诉用户可输入或选择东西 焦点状态通过伪类“:focus”以实现. bootstrap.css相应 ...
- bootstrap 表单控件 控件状态 控件大小 help-block
bootstrap 表单控件 控件状态 控件大小 help-block <!DOCTYPE html> <html lang="en"> <head& ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单:表单控件状态
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Bootstrap历练实例:表单控件状态(焦点)
输入框焦点 当输入框 input 接收到 :focus 时,输入框的轮廓会被移除,同时应用 box-shadow. <!DOCTYPE html><html><head& ...
- bootstrap 表单元素、按钮、链接的禁用
在Bootstra中,表单元素,按钮通过在标签内设置 disabled 或 disabled="disabled" 可以禁用表单元素,按钮.链接需要加入class="di ...
随机推荐
- js中DOMContentLoaded和load的区别
如题:DOMContentLoaded和load都是页面加载的时候触发的事件.区别在于触发的时机不一样. 浏览器渲染页面DOM文档加载的步骤: 1.解析HTML结构. 2.加载外部脚本和css文件. ...
- 2014腾讯实习生笔试题——define与typedef
2014腾讯实习生笔试(广州站)第26题填空题: #define MAX_NUM 1000+1 int Temp = Max_NUM*10; 则Temp的值为( ) 答案是:1010, 由于宏定义仅仅 ...
- SQL SEVER 2008中的演示样例数据库
SQL SEVER 2008数据库是什么我就不说了,我在这里分享一下怎样学习SQL SEVER 2008数据库,假设是对数据库或是SQL SEVER 数据库全然陌生或是不熟悉的人来说,建议看看一些视频 ...
- [NetworkFlow]网络流建模相关
流 网络流问题本质上是线性规划问题的应用之中的一个,线性规划问题的标准形式是给出一组等式约束和不等式约束.要求最优化一个线性函数. 在流问题中,变量以流量的形式出如今问题中,我们给出一个流网络(以有向 ...
- MySql存储过程与函数
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:存储过程和函数是在数据库中定义一些SQL语句的集合,然后直接调用这些存储过程和函数来运行 ...
- SharePoint 2013 Silverlight中使用Netclient对象模型
1.创建Silverlight时,选择Silverlight 4.不要选择版本号5,试了非常久版本号5都调用不了,自己也不知道什么原因.谷歌也没找到答案.后来尝试版本号4,能够调用. 至于Host t ...
- java.lang.IllegalStateException: Can not perform this action after onSaveInstanceState问题解决
(1)我用的是fragment,在onStop但是没有onDestroy的情况下切换(replace)fragment时报 java.lang.IllegalStateException: Can n ...
- codeforces 916E Jamie and Tree dfs序列化+线段树+LCA
E. Jamie and Tree time limit per test 2.5 seconds memory limit per test 256 megabytes input standard ...
- PHPExcel 使用心得
最近有个项目需要将数据导出成excel,以前都没接触过.便google一下知道了PHPExcel 这个据说很强大的类库. 写这个博文主要目的等同于做笔记 1首先看了下官方的文档.http://phpe ...
- Reactive Native开发环境搭建
root@zhongzhenhua-virtual-machine:~/AndroidCode# repo init -u https://android.googlesource.com/platf ...