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. python 002 文件输入输出

    python 文件对象不仅可以访问普通磁盘文件,也可以访问抽象层面上的文件对象(例如URL地址) 打开文件open() file()功能一致可以任意替代 fp = open('/etc/test.tx ...

  2. 【NOIP2018】为什么这么无力啊

    菜鸡又要爆零了 辛辛苦苦背板子结果考时候脑子一片空白 第一题线段树调了半小时 看完三道题两道写暴搜一道写暴力(说是暴搜,觉得更像写了个背包) 别提暴搜还忘记剪枝. . . . . . 我觉得考场上最菜 ...

  3. luogu2577 [ZJOI2005] 午餐 贪心

    题目大意 THU ACM小组的吃饭计划是这样的:先把所有的人分成两队,并安排好每队中各人的排列顺序,然后一号队伍到一号窗口去排队打饭,二号队伍到二号窗口去排队打饭.每个人打完饭后立刻开始吃,所有人都吃 ...

  4. C# datagridview 删除行（转 学会、放弃博客）

    原文引入:http://zhangyanyansy.blog.163.com/blog/static/13530509720106171252978/ datagridview 删除行 2010-07 ...

  5. hdu 2602（经典01背包）

    Bone Collector Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  6. BZOJ 4800 折半暴搜

    思路: 把它拆成两半  分别搜一发 两部分分别排好序 用two-pointers扫一遍 就可以了. (读入也要用long long) //By SiriusRen #include <cstdi ...

  7. 数组中hashCode就是内存地址，以及汉字幻化为16进制或10进制

    int[] arr4={1,2,3,4,5}; System.out.println("arr4: "+arr4); System.out.println("arr4.h ...

  8. 另一种压缩图片的方法---Machine learning 之 PCA（Principle Component Analysis）

    PCA最主要的用途是用来减少特征向量的数目,N个特征向量 减小到 K个特征向量.如果为了可视化,k可以使3 或者 2.这样可以加速算法的学习速度. PCA用来压缩图像同一有效. 具体方式以及原理在gi ...

  9. Nmap linux端口扫描神器

    #简介 Nmap亦称为Network Mapper(网络映射)是一个开源并且通用的用于Linux系统/网络管理员的工具.nmap用于探查网络.执行安全扫描.网络核查并且在远程机器上找出开放端口.它可以 ...

  10. python--8、socket网络编程

    socket socket可以完成C/S架构软件的开发.须知一个完整的计算机系统是由硬件.操作系统.应用软件三者组成,具备了这三个条件,一台计算机就可以工作了.但是要跟别人一起玩,就要上互联网(互联网 ...