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 日期处理之时区问题
Oct 08 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
Aug 28 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
JavaScript中window、doucment、body的解释
Aug 14 Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
JS匀速运动演示示例代码
Nov 26 Javascript
js控制分页打印、打印分页示例
Feb 08 Javascript
用JavaScript实现使用鼠标画线的示例代码
Aug 19 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 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
各种咖啡的英文名子是什么
2021/03/03 新手入门
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
php实现读取内存顺序号
2015/03/29 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
jQuery toggle()设置CSS样式
2009/11/05 Javascript
jquery实用代码片段集合
2010/08/12 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
[08:40]Navi Vs Newbee
2018/06/07 DOTA
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
基于python进行桶排序与基数排序的总结
2018/05/29 Python
Python判断字符串是否为字母或者数字(浮点数)的多种方法
2018/08/03 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
详解Python中的Lock和Rlock
2021/01/26 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
小学英语教师先进事迹
2014/05/28 职场文书
学生安全责任书模板
2014/07/25 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
婚庆答谢词
2015/01/04 职场文书
活动总结书怎么写
2015/05/11 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
Python实现滑雪小游戏
2021/09/25 Python