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 ...
随机推荐
- C++开发人脸性别识别总结
历时一个月,最终在昨天把<C++开发人脸性别识别总结>系列博客完毕了,第一篇博客发表在2015年12月29日,截止昨天2016年2月29日最后一篇完毕,去除中间一个月的寒假,正好一个月,首 ...
- spark之map与flatMap差别
scala> val m = List(List("a","b"),List("c","d")) m: List[ ...
- bzoj 4025 二分图 分治+并查集/LCT
bzoj 4025 二分图 [题目大意] 有n个点m条边,边会在start时刻出现在end时刻消失,求对于每一段时间,该图是不是一个二分图. 判断二分图的一个简单的方法:是否存在奇环 若存在奇环,就不 ...
- mtools 是由MongoDB 官方工程师实现的一套工具集,可以很快速的日志查询分析、统计功能,此外还支持本地集群部署管理.
mtools 是由MongoDB 官方工程师实现的一套工具集,可以很快速的日志查询分析.统计功能,此外还支持本地集群部署管理 https://www.cnblogs.com/littleatp/p/9 ...
- 杂项:JavaScript
ylbtech-杂项:JavaScript JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广 ...
- runC爆严重安全漏洞,主机可被攻击!使用容器的快打补丁
runC 是 Docker,Kubernetes 等依赖容器的应用程序的底层容器运行时.此次爆出的严重安全漏洞可使攻击者以 root 身份在主机上执行任何命令. 容器的安全性一直是容器技术的一个短板. ...
- Python可迭代序列排序总结
列表排序 示例:lst = [12, 6, 1, 3, 10] 方法一:使用sort def list_sort(lst): lst.sort() # 就地排序,没有返回值 return lst 补充 ...
- 【贪心】小Y的炮[cannon]题解
模拟赛的题目,做的时候由于第二题表打太久了,只剩下40分钟,想都没想就写了一个爆搜20分... 这道题单调性很关键,下面会解释 P.S.解释在代码里 #include<cstdio> #i ...
- Spring Cloud (3) 服务消费者-Ribbon
在上一篇中使用LoadBalancerClient接口实现了获取某个服务的具体实例,并根据实例信息发起服务接口消费请求.但是这样的做法需要我们手工的区编写服务选取.连接拼接等繁琐的工作,对于开发人员来 ...
- Android第三方登陆之新浪微博Weibo篇(原生登陆授权)
前言 Android第三方登录可以说是非常的常见,今天主要先说一下新浪微博第三方登陆授权. SDK版本支持 SDK v3.0已经发布了支持iPhone和Android的版本. 须将你的应用的包名签名信 ...