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水平表单格式的更多相关文章

  1. Bootstrap系列 -- 12. 水平表单

    Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右) 在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件: 1.在<form ...

  2. 关于bootstrap--表单(水平表单)

    在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件:1.在<form>元素是使用类名“form-horizontal”.2.配合Bootstrap框架的网格系统.(网格布局 ...

  3. bootstrap学习笔记一 登录水平表单

    先上效果图: 样式定义: <form class="form-horizontal"> <div class="control-group"& ...

  4. Bootstrap关于表单(二):水平表单

    Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右) 在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件: 1.在<form ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单:水平表单

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. SpringMVC之reset风格和form表单格式的curd

    CRUD c:create创建 r:retieve:查询 u:update:修改 d:delete:删除 rest /emp/1 get 代表查询id为1的员工 /emp/1 put 代表修改id为1 ...

  7. jQuery验证表单格式

    工作之余整理一些工作中编写的代码,记录自己工作中的技术要点,便于自己记忆已经整合.以下是关于此jQuery验证的一些标记以及使用方法: 整个js代码都放入jquery_validate_1.1.0.j ...

  8. axios的post传参时,将参数转为form表单格式

    import axios from 'axios'; import alert from './alert.js'; import Qs from 'qs' //引入qs 时axios的自带模块 le ...

  9. bootstrap 水平表单

    <form class="form-horizontal" role="form"> <div class="form-group& ...

随机推荐

  1. SQL2005中的事务与锁定(一) - 转载

    ----------------------------------------------------------------------- -- Author : HappyFlyStone -- ...

  2. iOS - 代码查看控制台打印内存使用情况:

    1.先导入: #import <mach/mach.h> 2.写此方法.单位为兆(M). void report_memory(void) { struct task_basic_info ...

  3. 去除冗余 – 精简您的CSS样式代码

    讲讲常见的一些没有必要使用CSS代码情况,而这些不起作用可以去掉的CSS代码可能是我们经常忽视的.越是对CSS理解不够,越容易出现这些问题. 二.一些常见不必要CSS样式 1.与默认CSS样式一致 我 ...

  4. Environment中针对的读写权限判断

    Android应用开发中,常使用Environment类去获取外部存储目录,在访问外部存储之前一定要先判断外部存储是否已经是可使用(已挂载&可使用)状态,并且需要在AndroidManifes ...

  5. java对象的序列化与反序列化使用

    1.Java序列化与反序列化  Java序列化是指把Java对象转换为字节序列的过程:而Java反序列化是指把字节序列恢复为Java对象的过程. 2.为什么需要序列化与反序列化 我们知道,当两个进程进 ...

  6. (转)java线程安全问题之静态变量、实例变量、局部变量

    java多线程编程中,存在很多线程安全问题,至于什么是线程安全呢,给出一个通俗易懂的概念还是蛮难的,如同<java并发编程实践>中所说: 写道 给线程安全下定义比较困难.存在很多种定义,如 ...

  7. 28、Oracle(四)用户权限控制

    一)用户Oracle中的用户分为二大类1)Oracle数据库服务器创建时,由系统自动创建的用户,叫系统用户,如sys.2)利用系统用户创建的用户,叫普通用户,如scott,hr,c##tiger,zh ...

  8. js实现鼠标的滑动

    js实现鼠标的滑动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  9. HDU 2846:Repository(Trie)

    http://acm.hdu.edu.cn/showproblem.php?pid=2846 题意:给出N个模式串,再给出M个文本串,问每一个文本串在多少个模式串中出现. 思路:平时都是找前缀的,这里 ...

  10. mysql聚集索引的优缺点

    聚簇索引并不是一种单独的索引类型,而是一种数据存储方式(不是数据结构,而是存储结构),具体细节依赖于其实现方式,但innodb的聚簇索引实际上是在同一个结构中保存了btree索引和数据行. 当表有索引 ...