bootstrap 水平排列表单
2015-12-30 11:00
726 查看
水平排列的表单
通过为表单添加 .form-horizontal类,并联合使用 Bootstrap 预置的栅格类,可以将
label标签和控件组水平并排布局。这样做将改变
.form-group的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加
.row了。
水平表单与其他表单不仅标记的数量上不同,而且表单的呈现形式也不同。如需创建一个水平布局的表单,请按下面的几个步骤进行:
向父 <form> 元素添加 class
.form-horizontal。
把标签和控件放在一个带有 class
.form-group的 <div> 中。
向标签添加 class
.control-label。
<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>
相关文章推荐
- Netty4学习笔记(2)-- Bootstrap
- Android使用bootstrap简单介绍
- bootstrap-model(对话框)打开关闭事件监听
- bootstrap导入JavaScript插件
- Bootstrap列表组listgroup
- [ERROR] Failed to execute/usr/local/mysql/bin/mysqld --bootstrap --datadir=……
- 值得分享的Bootstrap Ace模板实现菜单和Tab页效果
- yii2 禁止 自带的 jquery 和 bootstrap.css 文件
- 作品第二课----基于bootstrap的滚动监听
- Java源码 SpringMVC Mybatis Shiro Bootstrap Rest Webservice
- Bootstrap不同级别标题
- Bootstrap表单
- BootstrapValidator(1)
- Bootstrap(引入)环境安装
- bootstrap fileupload记录
- bootstrap插件学习-bootstrap.carousel.js
- 将bootstrap弹出框的点击弹出改为鼠标移入弹出
- 基于bootstrap的富文本框——wangEditor【欢迎增加开发】
- bootstrap ace admin 整合java HTML5 全新高大尚web后台框架
- springmvcmybatis整合,框架源码,bootstrap,html5,spring