全面解析Bootstrap表单使用方法(表单样式)


Posted in Javascript onNovember 24, 2015

一、基础表单

<form >
 <div class="form-group">
 <label>邮箱:</label>
 <input type="email" class="form-control" placeholder="请输入您的邮箱地址">
 </div>
 <div class="form-group">
 <label >密码</label>
 <input type="password" class="form-control" placeholder="请输入您的邮箱密码">
 </div>
 <div class="checkbox">
 <label>
 <input type="checkbox"> 记住密码
 </label>
 </div>
 <button type="submit" class="btn btn-default">进入邮箱</button>
 </form>

全面解析Bootstrap表单使用方法(表单样式)

表单除了这几个元素之外,还有input、select、textarea等元素,在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果。

1、宽度变成了100%

2、设置了一个浅灰色(#ccc)的边框

3、具有4px的圆角

4、设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化

5、设置了placeholder的颜色为#999

二、水平表单
Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右)。

<form class="form-horizontal" role="form">
 <div class="form-group">
 <label for="inputEmail3" class="col-sm-2 control-label">邮箱:</label>
 <div class="col-sm-4">
 <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
 </div>
 </div>
 <div class="form-group">
 <label for="inputPassword3" class="col-sm-2 control-label">密码:</label>
 <div class="col-sm-4">
 <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
 </div>
 </div>
 </form>

全面解析Bootstrap表单使用方法(表单样式)

在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件:
1、在<form>元素是使用类名".form-horizontal”。
2、配合Bootstrap框架的网格系统。

在<form>元素上使用类名".form-horizontal”主要有以下几个作用:
1、设置表单控件padding和margin值。
2、改变“form-group”的表现形式,类似于网格系统的“row”。 

三、内联表单
有时候我们需要将表单的控件都在一行内显示

<form class="form-inline" role="form">
 <div class="form-group">
 <label class="sr-only" for="exampleInputEmail2">邮箱</label>
 <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
 </div>
 <div class="form-group">
 <label class="sr-only" for="exampleInputPassword2">密码</label>
 <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
 </div>
 <button type="submit" class="btn btn-default">进入邮箱</button>
 </form>

全面解析Bootstrap表单使用方法(表单样式)

在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<form>元素中添加类名“.form-inline”即可。

如果你要在input前面添加一个label标签时,会导致input换行显示。如果你必须添加这样的一个label标签,并且不想让input换行,你需要将label标签也放在容器“form-group”中。

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

以上就是全面解析Bootstrap表单使用方法的第一篇,之后还有更多内容会不断更新,希望大家继续关注。

Javascript 相关文章推荐
js 页面传参数时 参数值含特殊字符的问题
Dec 13 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
mpvue将vue项目转换为小程序
Sep 30 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
JS 自执行函数原理及用法
Aug 05 Javascript
JavaScript交换两个变量方法实例
Nov 25 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 #Javascript
jquery彩色投票进度条简单实例演示
Jul 23 #Javascript
js生成随机数的过程解析
Nov 24 #Javascript
jquery制作图片时钟特效
Mar 30 #Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 #Javascript
JS鼠标拖拽实例分析
Nov 23 #Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 #Javascript
You might like
MYSQL 小技巧 -- LAST_INSERT_ID
2009/11/24 PHP
PHP的5个安全措施小结
2012/07/17 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
ThinkPHP框架安全实现分析
2016/03/14 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
js post方式传递提交的实现代码
2010/05/31 Javascript
javascript 主动派发事件总结
2011/08/09 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
详解C++编程中一元运算符的重载
2016/01/19 Python
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
Python全排列操作实例分析
2018/07/24 Python
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
python实现控制COM口的示例
2019/07/03 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
keras 多gpu并行运行案例
2020/06/10 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
AC Lens:购买隐形眼镜
2017/02/26 全球购物
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
啤酒销售实习自我鉴定
2013/09/24 职场文书
家具促销活动方案
2014/02/16 职场文书
红色经典观后感
2015/06/18 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android