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小数计算出现近似值的解决办法
Feb 06 Javascript
选择器中含有空格在使用示例及注意事项
Jul 31 Javascript
如何使用jquery easyui创建标签组件
Nov 18 Javascript
jquery实现文本框textarea自适应高度
Mar 09 Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 Javascript
vue绑定数字类型 value为数字的实例
Aug 31 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编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
php检查是否是ajax请求的方法
2015/04/16 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
JS实现打字游戏
2019/12/17 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
2020/09/16 Javascript
python类装饰器用法实例
2015/06/04 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
python opencv实现运动检测
2018/07/10 Python
python程序封装为win32服务的方法
2021/03/07 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
数学专业推荐信范文
2013/11/21 职场文书
体育馆的标语
2014/06/24 职场文书
2014幼儿园班主任工作总结
2014/12/04 职场文书
公司放假通知范文
2015/04/14 职场文书
2015年售票员工作总结
2015/04/29 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
物资采购管理制度
2015/08/06 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang