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 相关文章推荐
JS 控件事件小结
Oct 31 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
vue element table中自定义一些input的验证操作
Jul 18 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 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代码(星期六,星期日总和)
2009/11/12 PHP
phplot生成图片类用法详解
2015/01/06 PHP
PHP 实现判断用户是否手机访问
2015/01/21 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
在线编辑器的实现原理(兼容IE和FireFox)
2007/03/09 Javascript
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
Json解析的方法小结
2016/06/22 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
Python如何输出百分比
2020/07/31 Python
Python 中如何写注释
2020/08/28 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
经典大学生求职信范文
2014/01/06 职场文书
物价局领导班子四风问题整改措施
2014/10/26 职场文书
秋菊打官司观后感
2015/06/03 职场文书
小学运动会入场词
2015/07/18 职场文书
2016国培学习心得体会
2016/01/08 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
python基础之while循环语句的使用
2021/04/20 Python
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python