全面解析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 相关文章推荐
JavaScript 参考教程
Dec 29 Javascript
Jquery iframe内部出滚动条
Feb 11 Javascript
Extjs入门之动态加载树代码
Apr 09 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
jQuery简单实现两级下拉菜单效果代码
Sep 15 Javascript
微信小程序 教程之注册程序
Oct 17 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
详解Vue组件之间的数据通信实例
Jun 17 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 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
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
php适配器模式简单应用示例
2019/10/23 PHP
关于JavaScript的一些看法
2009/05/27 Javascript
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
2015/08/06 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
javascript异步编程的六种方式总结
2019/05/17 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
详解Python编程中time模块的使用
2015/11/20 Python
Python爬取qq music中的音乐url及批量下载
2017/03/23 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
python自动化办公操作PPT的实现
2021/02/05 Python
会话Bean的种类
2013/11/07 面试题
程序员岗位职责
2013/11/11 职场文书
小学毕业感言500字
2014/02/28 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python
MySQL学习之基础命令实操总结
2022/03/19 MySQL
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技