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. [MacOS] xcrun: error: active developer path ("/Volumes/Xcode/Xcode6-Beta.app/Contents/Developer") does not exist, use xcode-select to change

    When using MacOS with xcode6-beta, i always meet these error: xcrun: error: active developer path (& ...

  2. zw版【转发·台湾nvp系列Delphi例程】CheckDifference1

    zw版[转发·台湾nvp系列Delphi例程]CheckDifference1 procedure TForm1.Button1Click(Sender: TObject);var img, img1 ...

  3. BPM 应用系统开发案例实战

    概述 IBM BPM 的前身是 Lombardi,是由 IBM 于 2009 年收购的产品,之后产品更名为 IBM WebSphere Lombardi Edition,目前最新版本称为 IBM BP ...

  4. VS中快速生成json数据格式对应的实体

    JSON是一种取代XML的数据结构,和xml相比,它更小巧但描述能力却不差,由于它的小巧所以网络传输数据将减少更多流量从而加快速度. JSON就是一串字符串 只不过元素会使用特定的符号标注. {} 双 ...

  5. Entity Framework 无法对没有主键的视图映射实体的解决办法

    我们在使用Entity Framework的时候经常会把数据库中的某一个视图映射为EF的实体,但是如果数据库视图中的列没有包含表的主键列,EF会报出警告说视图没有主键,导致视图映射为实体失败,错误如下 ...

  6. Android ListView的理解(一)

    一.概述 这部分主要是讲解ListView在初始时,即setAdapter之后,如何将Adapter中取得的view添加到ListView中,主要涉及到几个方法: layoutChildren,fil ...

  7. c/c++ 常用的几个安全函数

    _stprintf_s  // 格式化字符串 _vsntprintf_s // 格式化 不定长参数用到

  8. Android消息处理机制(Handler 与Message)---01

    一.handler的使用场景为么会有handler?(部分内容图片摘自http://www.runoob.com/w3cnote/android-tutorial-handler-message.ht ...

  9. 在MyEclipse中搭建Spring MVC开发环境

    环境版本 IDE:MyEclipse 8.5 Spring:spring 3.2.8 JDK:1.6 1.打开MyEclipse-->File-->New-->Web Project ...

  10. ecshop后台通过ajax搜索原理

    ecshop的搜索其实是功能十分强大的,但是ecshop搜索功能前台和后台还不大一样,前台主要是通过get方式,提交的url进行分页,而在ecshop的后台,则是接受表单的搜索条件,然后通过js发布到 ...