bootstrp水平表单格式
1:form里添加类 "form-horizontal"
2:把标签和表单控件(input 等)放在一个带有类名 "form-group"的div里
3:标签可以直接用col-md-xx控制长度,表单控件要放在一个div里,用div的col-md-xx控制长度
4:标签添加类名"control-label", 表单控件添加类名"form-control"
一个具体的例子代码如下:
<div class="container" style="width:100%;height:100%;padding:0"> <div class="row" style="width:100%;height:100%;margin:0"> <form class="form-horizontal" method="post" action="#" style="width:100%;height:100%;"> <div class="form-group" style="margin-left: 0;"> <div class="col-md-8 col-md-offset-2 text-center"> <span style="font-size: 2em">用户登录</span> </div> </div>
<div class="form-group" style="margin-left: 0;"> <label class="col-md-3 control-label">邮箱:</label> <div class="col-md-9"> <input type="text" name="email" class="form-control"/> </div> </div>
<div class="form-group" style="margin-left: 0;"> <label class="col-md-3 control-label">密码:</label> <div class="col-md-9"> <input type="password" name="password" class="form-control"/> </div> </div> <div class="form-group" style="margin-left: 0;"> <div class="col-md-8 col-md-offset-3"> <label> <input type="checkbox" name="rememberMe"/>7天内有效 </label> </div> </div> <div class="form-group" style="margin-left: 0;"> <div class="col-md-3 col-md-offset-3 "> <input type="submit" class="form-control btn-success" value="登录" /> </div> <label class="col-md-3 text-center" style="padding:0;color:red;font-size: 0.5em">还没账号?请点此注册 </label> <div class="col-md-3" > <a href="#" class="form-control btn-info text-center">注册</a> </div> </div> </form>
</div></div>
效果如下,这里为了让用户登录框能和第一篇文章的div框高度相等,对bootstrap默认的padding margin height width等作了修改,

bootstrp水平表单格式的更多相关文章
- Bootstrap系列 -- 12. 水平表单
Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右) 在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件: 1.在<form ...
- 关于bootstrap--表单(水平表单)
在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件:1.在<form>元素是使用类名“form-horizontal”.2.配合Bootstrap框架的网格系统.(网格布局 ...
- bootstrap学习笔记一 登录水平表单
先上效果图: 样式定义: <form class="form-horizontal"> <div class="control-group"& ...
- Bootstrap关于表单(二):水平表单
Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右) 在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件: 1.在<form ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单:水平表单
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- SpringMVC之reset风格和form表单格式的curd
CRUD c:create创建 r:retieve:查询 u:update:修改 d:delete:删除 rest /emp/1 get 代表查询id为1的员工 /emp/1 put 代表修改id为1 ...
- jQuery验证表单格式
工作之余整理一些工作中编写的代码,记录自己工作中的技术要点,便于自己记忆已经整合.以下是关于此jQuery验证的一些标记以及使用方法: 整个js代码都放入jquery_validate_1.1.0.j ...
- axios的post传参时,将参数转为form表单格式
import axios from 'axios'; import alert from './alert.js'; import Qs from 'qs' //引入qs 时axios的自带模块 le ...
- bootstrap 水平表单
<form class="form-horizontal" role="form"> <div class="form-group& ...
随机推荐
- [php] PHPStorm8 for Yincart project
PHPStorm8 license for Yincart project: https://github.com/yinheark/yincart2 User Name: Yincart ===== ...
- css在IE和Firefox下的兼容性
1.div的垂直居中问题 vertical-align:middle,将行距增加到和整个div高度一样,加line-height:200px;然后插入文字就垂直居中了.缺点是要控制内容不要换行. 2. ...
- Spring+SpringMVC+MyBatis)
用SSM(Spring.SpringMVC和Mybatis)已经有三个多月了,项目在技术上已经没有什么难点了,基于现有的技术就可以实现想要的功能,当然肯定有很多可以改进的地方.之前没有记录SSM整合的 ...
- U盘启动引导安装linux
一.U盘引导,安装前的准备 1.U盘一枚,至少2G 2.下载并安装虚拟光驱,这里我用的是UltralSO. 二.制作引导盘 1.打开UltraISO软件,选择文件->打开,打开需要烧录的镜像文件 ...
- 160909、Filter多方式拦截、禁用IE图片缓存、Filter设置字符编码
dispatcher多方式拦截 我们来看一个例子 我们定义一个index.jsp,里面有一个链接跳转到dispatcher.jsp页面 <body> <a href="di ...
- iOS直播的技术分析与实现
HTTP Live Streaming直播(iOS直播)技术分析与实现 发布于:2014-05-28 13:30阅读数:12004 HTTP Live Streaming直播(iOS直播)技术分析与实 ...
- 启动hadoop报192.168.1.151: Address 192.168.1.151 maps to node1, but this does not map back to the address - POSSIBLE BREAK-IN ATTEMPT!
使用root用户启动hadoop的时候报错: [root@node1 ~]# su - hadoop -c start-all.sh starting namenode, logging to /ap ...
- 手机端上传未知图片大小,js设置宽高比例
<style rel="stylesheet" type="text/css"> .lunboimg{ width: 100%; height: a ...
- 29、Oralce(五)
1)掌握PLSQL程序设计 2)掌握存储过程,函数和触发器 3)了解一些oralceSQL语句优化方案 ------------------------------------------------ ...
- 26、Oracle(二)
1)掌握多行函数与分组操作 2)掌握多表查询与子查询 3)理解集合查询与掌握Oracle分页语法 4)理解创建.修改和删除表和表约束 --------------------------------- ...