全面解析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 cookie中文乱码解决方法
Jan 28 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
详解如何让Express支持async/await
Oct 09 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
vue-router启用history模式下的开发及非根目录部署方法
Dec 23 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 Javascript
JS实现滑动插件
Jan 15 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
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
PHP中include()与require()的区别说明
2010/03/10 PHP
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
javascript window对象属性整理
2009/10/24 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
2013/01/17 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
Vue实现开关按钮拖拽效果
2020/09/22 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
python计算对角线有理函数插值的方法
2015/05/07 Python
不要用强制方法杀掉python线程
2017/02/26 Python
详解supervisor使用教程
2017/11/21 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
python-地图可视化组件folium的操作
2020/12/14 Python
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
初中数学教学反思
2014/01/16 职场文书
感谢信怎么写
2015/01/21 职场文书
雷锋电影观后感
2015/06/10 职场文书
运动会800米赞词
2015/07/22 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书