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 相关文章推荐
转换字符串为json对象的方法详解
Nov 29 Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 Javascript
Angular简单验证功能示例
Dec 22 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 Javascript
k8s node节点重新加入master集群的实现
Feb 22 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 &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
PHP 代码规范小结
2012/03/08 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
JavaScript 代码压缩工具小结
2012/02/27 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
jquery常用操作小结
2014/07/21 Javascript
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
js验证密码强度解析
2020/03/18 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
python字符串连接方式汇总
2014/08/21 Python
手把手教你用python抢票回家过年(代码简单)
2018/01/21 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
python十进制转二进制的详解
2020/02/07 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
分享一个页面平滑滚动小技巧(推荐)
2019/10/23 HTML / CSS
中学教师实习自我鉴定
2013/09/28 职场文书
英语专业推荐信
2013/11/16 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
如何写好活动总结
2019/06/21 职场文书
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python