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 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
DWZ table的原生分页浅谈
Mar 01 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
Apr 25 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
微信小程序 简单教程实例详解
Jan 13 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
浅谈angular4.0中路由传递参数、获取参数最nice的写法
Mar 12 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 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
php ci框架验证码实例分析
2013/06/26 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
网站防止被刷票的一些思路与方法
2015/01/08 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
vue移动端使用canvas签名的实现
2020/01/15 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
2021/02/18 Vue.js
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
英国女性时尚品牌:Apricot
2018/12/04 全球购物
编辑个人求职信范文
2013/09/21 职场文书
运动会解说词50字
2014/01/18 职场文书
办公室主任岗位承诺书
2014/05/29 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
总结几个非常实用的Python库
2021/06/26 Python
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python