Bootstrap表单Form全面解析


Posted in Javascript onJune 13, 2016

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

在进行自己的后台改版时,大体布局都使用了bootstrap,剩下的表单部分没理由不去使用它,对于表单的美化和布局,bootstrap做的也是很不错的,有大气的边框,多功能的按钮及宏观的表单布局,一切都是那么的完整与完美!

Bootstrap表单Form全面解析

普通表单

我们需要将表单元素包裹到form-group类里,一般以<div class="form-group">...</div>来进行存放,而在它内容表单元素名称一般放在label标签里,而input标签的类名为form-control,值得注意的是,你的checkbox和radio等元素需要写在自己的div里。

例如下面的表单

<form>
 <div class="form-group">
  <label for="exampleInputEmail1">Email address</label>
  <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
 </div>
 <div class="form-group">
  <label for="exampleInputPassword1">Password</label>
  <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
 </div>
 <div class="form-group">
  <label for="exampleInputFile">File input</label>
  <input type="file" id="exampleInputFile">
  <p class="help-block">Example block-level help text here.</p>
 </div>
 <div class="checkbox">
  <label>
   <input type="checkbox"> Check me out
  </label>
 </div>
 <button type="submit" class="btn btn-default">Submit</button>
</form>

运行之后的效果

 Bootstrap表单Form全面解析

水平排放的表单

需要你的表单元素需要水平排放,可以在表单上添加类.form-inline,这种表单一般在元素比较少时比较适用

例如

<form class="form-inline">
 <div class="form-group">
  <label class="sr-only" for="exampleInputEmail3">Email address</label>
  <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
 </div>
 <div class="form-group">
  <label class="sr-only" for="exampleInputPassword3">Password</label>
  <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
 </div>
 <div class="checkbox">
  <label>
   <input type="checkbox"> Remember me
  </label>
 </div>
 <button type="submit" class="btn btn-default">Sign in</button>
</form>

Bootstrap表单Form全面解析

普通表单+元素水平排放

这种表单用的是最多的,在一般用户注册,填写资料时,经常可以见到如下的表单效果

Bootstrap表单Form全面解析

实现这种表单使用了.form-horizontal类,每行元素被包裹在 <div class="form-group">...</div>即可

form class="form-horizontal">
 <div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
  <div class="col-sm-10">
   <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  </div>
 </div>
 <div class="form-group">
  <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
  <div class="col-sm-10">
   <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
  </div>
 </div>
 <div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
   <div class="checkbox">
    <label>
     <input type="checkbox"> Remember me
    </label>
   </div>
  </div>
 </div>
 <div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
   <button type="submit" class="btn btn-default">Sign in</button>
  </div>
 </div>
</form>

我们通过代码也可以看到,在进行表单布局时,也可以用col-sm和col-sm-offset进行栅格布局

以上所述是小编给大家介绍的Bootstrap表单Form全面解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
Apr 02 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
Oct 05 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 Javascript
JS将unicode码转中文方法
May 08 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 #Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 #Javascript
多种jQuery绑定事件的实现方式
Jun 13 #Javascript
JS Ajax请求如何防止重复提交
Jun 13 #Javascript
JavaScript判断微信浏览器实例代码
Jun 13 #Javascript
JavaScript判断是否是微信浏览器
Jun 13 #Javascript
JavaScript_object基础入门(必看篇)
Jun 13 #Javascript
You might like
php下封装较好的数字分页方法
2010/11/23 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
PDO::errorInfo讲解
2019/01/28 PHP
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
jquery isType() 类型判断代码
2011/02/14 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
js实现兼容IE和FF的上下层的移动
2015/05/04 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
纯javascript实现自动发送邮件
2015/10/21 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
浅谈Node.js之异步流控制
2017/10/25 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
微信小程序实现时间戳格式转换
2020/07/20 Javascript
Python 多线程Threading初学教程
2017/08/22 Python
python 读取.csv文件数据到数组(矩阵)的实例讲解
2018/06/14 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
python日志logging模块使用方法分析
2019/05/23 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
营销专业应届生求职信
2013/11/26 职场文书
秘书行业自我鉴定范文
2013/12/30 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
工伤调解协议书
2016/03/21 职场文书
合作意向书范本
2019/04/17 职场文书
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫