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 相关文章推荐
Prototype使用指南之dom.js
Jan 10 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 Javascript
如何将一个String和多个String值进行比较思路分析
Apr 22 Javascript
利用进制转换压缩数字函数分享
Jan 02 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
四种参数传递的形式——URL,超链接,js,form表单
Jul 24 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
web前端vue filter 过滤器
Jan 12 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 Javascript
vue实现表格过滤功能
Sep 27 Javascript
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
模仿OSO的论坛(五)
2006/10/09 PHP
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
Python中Numpy mat的使用详解
2019/05/24 Python
Python 多进程原理及实现
2020/12/21 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
化学相关工作求职信
2013/10/02 职场文书
小学教师事迹材料
2014/01/13 职场文书
活动志愿者自荐信
2014/01/27 职场文书
九年级数学教学反思
2014/02/02 职场文书
护理专科自荐书范文
2014/02/18 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
汽车维修专业自荐书
2014/05/26 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
民事赔偿协议书
2014/11/02 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
党章学习心得体会2016
2016/01/14 职场文书