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 ...
随机推荐
- ningbooj--1655--木块拼接(贪心)
[1655] 木块拼接 时间限制: 1000 ms 内存限制: 65535 K 问题描述 好奇的skyv95想要做一个正方形的木块,现在有三种颜色的矩形木块,颜色分别为"A" ...
- 【POJ 3764】 The xor-longest path
[题目链接] http://poj.org/problem?id=3764 [算法] 首先,我们用Si表示从节点i到根的路径边权异或和 那么,根据异或的性质,我们知道节点u和节点v路径上的边权异或和就 ...
- 10.3.3 WebView的几个常见功能
(1)背景设置,例如下面的代码. webView.setBackgroundColor(0);//先设置背景色为transparent webView.setBackgroundResource(R. ...
- js form settimeout
<html><head><meta charset="utf8"><script type="text/javascript&q ...
- TP5.x——聊天列表查询
前言 查询聊天列表,并返回最后一条聊天记录.这个有一个比较尴尬的点就是,一个是你主动发出的,一个是你接收的. 所以这个SQL会比较长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长 ...
- Django day14(一) cookie
一: Cookie 1. Cookie是什么?存储在客户端浏览器上的键值对 2. 原理: 是服务器产生,发给客户端浏览器,浏览器保存起来,下次发请求,会携带这个键值对到服务器 4. Cookie的覆 ...
- sublime 的快捷键大全
Sublime Text 3 快捷键精华版 Ctrl+Shift+P:打开命令面板 Ctrl+P:搜索项目中的文件 Ctrl+G:跳转到第几行 Ctrl+W:关闭当前打开文件 Ctrl+Shift+W ...
- Rancher 2:添加 NFS client provisioner 动态提供 Kubernetes 后端存储卷
一.前提说明 1.说明: NFS client provisioner 利用 NFS Server 给 Kubernetes 作为持久存储的后端,并且动态提供PV. 默认 rancher 2 的存储类 ...
- alipay.trade.refund (统一收单交易退款接口)[支付宝退款]
首页官网退款的api: https://doc.open.alipay.com/docs/api.htm?spm=a219a.7395905.0.0.UTBitT&docType=4& ...
- 【DP、线段树优化】琪露诺
跟去年(2017)PJ第四题几乎是一样的?/吐血 DP方程可以很简单的推出来,f[i]=max{f[k]}+a[i] 然而这样做是O(n^2)的 看一下数据,200000的话要不nlogn 要不n 由 ...