全面解析Bootstrap表单使用方法(表单控件状态)


Posted in Javascript onNovember 24, 2015

一、焦点状态

焦点状态是通过伪类“:focus”来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式,重新添加阴影效果。

<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" type="text" placeholder="焦点点状态下效果">
 </div>
 </div>
</form>
 

 全面解析Bootstrap表单使用方法(表单控件状态)

二、禁用状态

Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的,在相应的表单控件上添加属性“disabled”。

<form role="form">
 <input class="form-control input-lg" id="disabledInput" type="text" placeholder="表单已被禁用,不可输入" disabled>
 <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>

全面解析Bootstrap表单使用方法(表单控件状态) 

三、验证状态

在制作表单时,不免要做表单验证。同样也需要提供验证状态样式,在Bootstrap框架中同样提供这几种效果。

1、.has-warning:警告状态(黄色)

2、.has-error:错误状态(红色)

3、.has-success:成功状态(绿色)

使用的时候只需要在form-group容器上对应添加状态类名

<form role="form">
 <div class="form-group has-success">
 <label class="control-label" for="inputSuccess1">成功状态</label>
 <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
 </div>
 <div class="form-group has-warning">
 <label class="control-label" for="inputWarning1">警告状态</label>
 <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
 </div>
 <div class="form-group has-error">
 <label class="control-label" for="inputError1">错误状态</label>
 <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
 </div>
</form>

全面解析Bootstrap表单使用方法(表单控件状态)

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是针对Bootstrap表单控件状态的详细介绍,之后还有更多内容会不断更新,希望大家继续关注。

Javascript 相关文章推荐
js 面向对象的技术创建高级 Web 应用程序
Feb 25 Javascript
Jquery Autocomplete 结合asp.net使用要点
Oct 29 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
可以浮动某个物体的jquery控件用法实例
Jul 24 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
js弹出对话框方式小结
Nov 17 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
uni-app之APP和小程序微信授权方法
May 09 Javascript
微信小程序向Java后台传输参数的方法实现
Dec 10 Javascript
jQuery解析Json实例详解
Nov 24 #Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 #Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 #Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 #Javascript
jquery彩色投票进度条简单实例演示
Jul 23 #Javascript
js生成随机数的过程解析
Nov 24 #Javascript
jquery制作图片时钟特效
Mar 30 #Javascript
You might like
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
PHP将两个关联数组合并函数提高函数效率
2014/03/18 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
yepnope.js 异步加载资源文件
2011/09/08 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
详解CommonJS和ES6模块循环加载处理的区别
2018/12/26 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
python opencv捕获摄像头并显示内容的实现
2019/07/11 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
tensorflow 环境变量设置方式
2020/02/06 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
Pretty Little Thing爱尔兰:时尚女性服饰
2017/03/27 全球购物
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
法定代表人授权委托书
2014/09/19 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
写给老师的感谢信
2015/01/20 职场文书
办公用品质量保证书
2015/05/11 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS