Bootstrap实现水平排列的表单


Posted in Javascript onJuly 04, 2016

通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了。

水平表单与其他表单不仅标记的数量上不同,而且表单的呈现形式也不同。如需创建一个水平布局的表单,请按下面的几个步骤进行:

1、向父 <form> 元素添加 class .form-horizontal。
2、把标签和控件放在一个带有 class .form-group 的 <div> 中。
3、向标签添加 class .control-label。

Bootstrap实现水平排列的表单

实现代码:

<form class="form-horizontal" role="form"> 
 <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>

如果大家还想深入学习,可以点击这里进行学习,再为大家附一个精彩的专题:Bootstrap学习教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ASP Json Parser修正版
Dec 06 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
Javascript基础教程之比较null和undefined值
May 16 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
AngularJS实时获取并显示密码的方法
Feb 06 Javascript
AngularJS $http post 传递参数数据的方法
Oct 09 Javascript
Element Rate 评分的使用方法
Jul 27 Javascript
JavaScript 判断数据类型的4种方法
Sep 11 Javascript
vue 虚拟DOM的原理
Oct 03 Javascript
JavaScript中遍历的十种方法总结
Dec 15 Javascript
js面向对象方式实现拖拽效果
Mar 03 Javascript
canvas绘制折线路径动画实现
May 12 Javascript
JSONP跨域请求实例详解
Jul 04 #Javascript
Bootstrap表单布局样式源代码
Jul 04 #Javascript
JS JSOP跨域请求实例详解
Jul 04 #Javascript
json格式的javascript对象用法分析
Jul 04 #Javascript
jQuery简单动画变换效果实例分析
Jul 04 #Javascript
Node.js Streams文件读写操作详解
Jul 04 #Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 #Javascript
You might like
透析PHP的配置文件php.ini
2006/10/09 PHP
php中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
$.format,jquery.format 使用说明
2011/07/13 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
js单例模式详解实例
2013/11/21 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
Python中有趣在__call__函数
2015/06/21 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
Python实现感知机(PLA)算法
2017/12/20 Python
python实现图书管理系统
2018/03/12 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
Python xlwt模块使用代码实例
2020/06/10 Python
python识别验证码的思路及解决方案
2020/09/13 Python
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
比较基础的php面试题及答案-编程题
2012/10/14 面试题
介绍下Lucene建立索引的过程
2016/03/02 面试题
事业单位请假制度
2014/01/13 职场文书
小学新教师培训方案
2014/02/03 职场文书
学校党支部承诺书
2015/04/30 职场文书
红白喜事主持词
2015/07/06 职场文书
董事长新年致辞
2015/07/29 职场文书
阿里云Nginx配置https实现域名访问项目(图文教程)
2021/03/31 Servers
室外天线与收音机天线杆接合方法
2022/04/05 无线电