Bootstrap框架默认的表单是垂直显示风格，但很多时候我们需要的水平表单风格（标签居左，表单控件居右）

在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：

1、在<form>元素是使用类名“form-horizontal”。 2、配合Bootstrap框架的网格系统。（网格布局会在以后的章节中详细讲解）

在<form>元素上使用类名“form-horizontal”主要有以下几个作用： 1、设置表单控件padding和margin值。 2、改变“form-group”的表现形式，类似于网格系统的“row”。

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

	<title>水平表单</title>

	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

</head>

<body>

<form class="form-horizontal" role="form">

  <div class="form-group">

    <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>

    <div class="col-sm-10">

      <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">

    </div>

  </div>

  <div class="form-group">

    <label for="inputPassword3" class="col-sm-2 control-label">密码</label>

    <div class="col-sm-10">

      <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">

    </div>

  </div>

  <div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

      <div class="checkbox">

        <label>

          <input type="checkbox"> 记住密码

        </label>

      </div>

    </div>

  </div>

  <div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

      <button type="submit" class="btn btn-default">进入邮箱</button>

    </div>

  </div>

</form>

</body>

</html>

Bootstrap关于表单（二）：水平表单的更多相关文章

  1. 关于bootstrap--表单（水平表单）

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

  2. Excel：一维表和二维表 互转

    一.一维表转二维表 数据源: 一份流水账式的值班表,为了便于打印张贴,现在需要使其变成这样的样式: 也就是从一维表变成传说中的二维表. 1.新建查询 依次单击[数据]→[新建查询] →[从文件]→[从 ...

  3. SQL Server 表分区之水平表分区

    什么是表分区? 表分区分为水平表分区和垂直表分区,水平表分区就是将一个具有大量数据的表,进行拆分为具有相同表结构的若干个表:而垂直表分区就是把一个拥有多个字段的表,根据需要进行拆分列,然后根据某一个字 ...

  4. linux 进阶2--C++读取lua文件中的变量、一维表、二维表

    lua 语言非常灵活,一般把lua 作为脚本文件,会用C++与之进行交互.最重要的是C++代码能读取到脚本中的变量.一维表.二维表. 这样有些参数就可以在lua文件进行更改,而不用重新更改C++代码. ...

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

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

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

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

  7. Django day08 多表操作 (二) 添加表记录

    一: 一对多 1. 一对多新增 两种方式:  publish = 对象    publish_id = id 1. publish_id 和 publish 的区别就是: 1)publish_id 可 ...

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

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

  9. SQL Server表分区（水平分区及垂直分区)

    什么是表分区? 表分区分为水平表分区和垂直表分区,水平表分区就是将一个具有大量数据的表,进行拆分为具有相同表结构的若干个表:而垂直表分区就是把一个拥有多个字段的表,根据需要进行拆分列,然后根据某一个字 ...

随机推荐

  1. MySql存储过程与函数

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:存储过程和函数是在数据库中定义一些SQL语句的集合,然后直接调用这些存储过程和函数来运行 ...

  2. BZOJ 2048 2009国家集训队 书堆 数学算法

    题目大意:经典的物理上的桌边堆书问题,初中物理老师以前还讲过,只是仅仅记住了结论. . . 没关系,简单证明一下就好 首先我们设由上至下第i本书比它以下那本书多伸出去的长度为a[i],前缀和为s[i] ...

  3. mac Homebrew Updating慢，替换及重置Homebrew默认源

    替换成清华的镜像: https://lug.ustc.edu.cn/wiki/mirrors/help/brew.git

  4. linux下获取按键响应事件【转】

    本文转载自:https://my.oschina.net/u/157503/blog/91548 1.问题 通过一个死循环将读取键盘对应的设备文件将触发键盘事件在屏幕上打印出来,按esc退出程序 代码 ...

  5. ledisDB底层实现——本质上就是用leveldb这样的底层存储，和ssdb一样，meta里存的是hash、list等的元数据

    Hash hash可以算是一种两级kv,首先通过key找到一个hash对象,然后再通过field找到或者设置相应的值. 在ledisdb里面,我们需要将key跟field关联成一个key,用来存放或者 ...

  6. awk查找特定字段

    在一行中,查找字段包含exe的: ###########awk.awk######## { for(i=1;i<NF;i++) { if($i ~ /exe/) { print $i } } } ...

  7. Python中的math和保留小数位数方法

    转载自 http://xukaizijian.blog.163.com/blog/static/17043311920111163272414/ math模块实现了许多对浮点数的数学运算函数.  这些 ...

  8. 排序系列 之 归并排序算法 —— Java实现

    基本思想: 归并排序法是分治法的典型实例,分为分割和归并两部分. 把一个数组分为大小相近的子数组(分割),分别把子数组排好序后,通过合成一个大的排好序的数组(归并). 实例: 先分割成每个子序列只有一 ...

  9. HTTP权威协议笔记-9.Web机器人

    经过整个春节的放肆,终于回归了,说实话,春节真心比上班累. 9.1 爬虫及爬行方式 (1) 爬虫:Web爬虫是一种机器人,他们会递归性的对各种信息Web站点进行遍历. (2) 爬行方式:Web机器人会 ...

  10. Palindrome(dp)

    http://poj.org/problem?id=1159 题意:给定一个字符,问最少插入多少字符,使该字符串变成回文字符串. 思路:设原字符串序列为X,其逆字符串为Y,则最少插入的字符数=leng ...