全面解析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 相关文章推荐
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
仿jQuery的siblings效果的js代码
Aug 09 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
详谈javascript中的cookie
Jun 03 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 Javascript
javascript 原型与原型链的理解及应用实例分析
Feb 10 Javascript
JS遍历树层级关系实现原理解析
Aug 31 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
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
php实现最简单的MVC框架实例教程
2014/09/08 PHP
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
Python ZipFile模块详解
2013/11/01 Python
Linux中Python 环境软件包安装步骤
2016/03/31 Python
Python编码类型转换方法详解
2016/07/01 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
文秘专业应届生求职信范文
2013/11/14 职场文书
2014年党务公开实施方案
2014/02/27 职场文书
业务员简历自我评价
2014/03/06 职场文书
小区推广策划方案
2014/06/06 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
博物馆观后感
2015/06/05 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript