全面解析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 相关文章推荐
DOM下的节点属性和操作小结
May 14 Javascript
Extjs学习笔记之二 初识Extjs之Form
Jan 07 Javascript
jQuery插件开发基础简单介绍
Jan 07 Javascript
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 Javascript
JsRender for object语法简介
Oct 31 Javascript
javascript实现随时变化着的背景颜色
Apr 02 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 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读取flv文件的播放时间长度
2009/09/03 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
Jquery iframe内部出滚动条
2010/02/11 Javascript
js Dialog 实践分享
2012/10/22 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
jQuery+ajax读取json数据并按照价格排序示例
2018/03/28 jQuery
angular学习之动态创建表单的方法
2018/12/07 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
谈一谈基于python的面向对象编程基础
2019/05/21 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
python实现双人五子棋(终端版)
2020/12/30 Python
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
暑期实践思想汇报
2014/01/06 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
后勤管理员岗位职责
2014/08/27 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
学校施工安全责任书
2015/01/29 职场文书
股东出资协议书
2016/03/21 职场文书
Python天气语音播报小助手
2021/09/25 Python
python 判断文件或文件夹是否存在
2022/03/18 Python
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python