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 相关文章推荐
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
js中获取事件对象的方法小结
Mar 13 Javascript
Javascript中string转date示例代码
Nov 01 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
调整小数的格式保留小数点后两位
May 14 Javascript
jquery制作select列表双向选择示例代码
Sep 02 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
Sep 05 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中的字符串函数
2006/10/09 PHP
谈谈PHP语法(5)
2006/10/09 PHP
php5.5新数组函数array_column使用
2013/07/08 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
flexigrid 参数说明
2010/11/23 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
ES6实现的遍历目录函数示例
2017/04/07 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
详细解读Python中的__init__()方法
2015/05/02 Python
Python 迭代器工具包【推荐】
2016/05/06 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
学python安装的软件总结
2019/10/12 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
python自动化测试三部曲之request+django实现接口测试
2020/10/07 Python
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
物业招聘计划书
2014/01/10 职场文书
土木建筑学生自我评价
2014/01/14 职场文书
运动会演讲稿200字
2014/08/25 职场文书
2015年暑期社会实践总结
2015/07/13 职场文书
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL
SQL Server Agent 服务无法启动
2022/04/20 SQL Server
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技