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 相关文章推荐
HTML颜色选择器实现代码
Nov 23 Javascript
jquery获取节点名称
Apr 26 Javascript
微信小程序 底部导航栏目开发资料
Dec 05 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 Javascript
js链表操作(实例讲解)
Aug 29 Javascript
在一个页面实现两个zTree联动的方法
Dec 20 Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 Javascript
vue自定义指令的创建和使用方法实例分析
Dec 04 Javascript
详解小程序之简单登录注册表单验证
May 13 Javascript
微信小程序如何调用新闻接口实现列表循环
Jul 02 Javascript
google广告之另类js调用实现代码
Aug 22 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 正则匹配函数体
2009/08/25 PHP
php实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
基于Laravel 多个中间件的执行顺序详解
2019/10/21 PHP
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python类和函数中使用静态变量的方法
2015/05/09 Python
让Python代码更快运行的5种方法
2015/06/21 Python
详解Django框架中的视图级缓存
2015/07/23 Python
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
python实现排序算法解析
2018/09/08 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
什么是Remote Module
2016/06/10 面试题
财务人员担保书
2014/05/13 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle