全面解析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 相关文章推荐
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
jquery教程ajax请求json数据示例
Jan 13 Javascript
基于jquery的simpleValidate简易验证插件
Jan 31 Javascript
jquery控制display属性为none或block
Mar 31 Javascript
js图片实时加载提供网页打开速度
Sep 11 Javascript
微信小程序 Toast自定义实例详解
Jan 20 Javascript
详解Node.js项目APM监控之New Relic
May 12 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
微信小程序实现左侧滑动导航栏
Apr 08 Javascript
vue实现扫码功能
Jan 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生成自己的LOG文件
2006/10/09 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
2016/07/09 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
基于js 各种排序方法和sort方法的区别(详解)
2018/01/03 Javascript
vue element-ui table表格滚动加载方法
2018/03/02 Javascript
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
JavaScript实现消消乐的源代码
2021/01/12 Javascript
Python引用模块和查找模块路径
2016/03/17 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
Django实现简单的分页功能
2021/02/22 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
高中同学会活动方案
2014/08/14 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
2014年妇联工作总结
2014/11/21 职场文书
个人政治思想总结
2015/03/05 职场文书
学习焦裕禄观后感
2015/06/09 职场文书
2016新年晚会开场白
2015/12/03 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
小程序后台PHP版本部署运行 LNMP+WNMP
2021/04/01 Servers