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 相关文章推荐
js程序中美元符号$是什么
Jun 05 Javascript
JavaScript DOM学习第八章 表单错误提示
Feb 19 Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
js实现简单扫雷
Nov 27 Javascript
Python机器学习之决策树和随机森林
Jul 15 Javascript
8个JS的reduce使用实例和reduce操作方式
Oct 05 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
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
基于python及pytorch中乘法的使用详解
2019/12/27 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
求职自荐信范文格式
2013/11/29 职场文书
学期研究性学习个人的自我评价
2014/01/09 职场文书
同学聚会通知书
2015/04/20 职场文书