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 相关文章推荐
兼容多浏览器的字幕特效Marquee的通用js类
Jul 20 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 Javascript
分享javascript计算时间差的示例代码
Mar 19 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
jquery 手势密码插件
Mar 17 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
详解Puppeteer 入门教程
May 09 Javascript
vue插件实现v-model功能
Sep 10 Javascript
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 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
?生?D片??C字串
2006/12/06 PHP
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
PHP7.0版本备注
2015/07/23 PHP
php实现URL加密解密的方法
2016/11/17 PHP
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
[01:28:56]2014 DOTA2华西杯精英邀请赛 5 24 CIS VS DK
2014/05/26 DOTA
Python中的True,False条件判断实例分析
2015/01/12 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
Python实现的矩阵类实例
2017/08/22 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
Python使用configparser库读取配置文件
2020/02/22 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
后勤园长自我鉴定
2013/10/17 职场文书
数控技术专业毕业自荐书范文
2014/02/05 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
药店促销活动总结
2014/07/10 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
会议接待欢迎标语
2014/10/08 职场文书
大学生考试作弊被抓检讨书
2014/12/27 职场文书
申报材料格式
2014/12/30 职场文书
房屋租赁意向书范本
2015/05/09 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript