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

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

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

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

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5. 	<title>水平表单</title>
  6. 	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <form class="form-horizontal" role="form">
  10.   <div class="form-group">
  11.     <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
  12.     <div class="col-sm-10">
  13.       <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
  14.     </div>
  15.   </div>
  16.   <div class="form-group">
  17.     <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
  18.     <div class="col-sm-10">
  19.       <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
  20.     </div>
  21.   </div>
  22.   <div class="form-group">
  23.     <div class="col-sm-offset-2 col-sm-10">
  24.       <div class="checkbox">
  25.         <label>
  26.           <input type="checkbox"> 记住密码
  27.         </label>
  28.       </div>
  29.     </div>
  30.   </div>
  31.   <div class="form-group">
  32.     <div class="col-sm-offset-2 col-sm-10">
  33.       <button type="submit" class="btn btn-default">进入邮箱</button>
  34.     </div>
  35.   </div>
  36. </form>
  37. </body>
  38. </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. Sublime text 神器小记

    曾经一直使用的都是Editplus,一直感觉都是非常不错的. 可是近期接触到sublime text,我就fall in love with it. Sublime 的意思是"顶峰,高尚,非 ...

  2. 用HttpCombiner来减少js和css的请问次数

    HttpCombiner也不记得是谁写的了,功能是把多个js文件或css文件合并到一块,压缩一下一起发给客户端来优化网站. 用法是这样的: <script type="text/jav ...

  3. luogu3390 矩阵快速幂

    矩阵A乘矩阵B是A的第i行向量乘以B的第j列向量的值放在结果矩阵的i行j列.因为矩阵乘法满足结合律,所以它可以与一般的快速幂算法同理使用.注意矩阵在乘的时候取模. #include <cstdi ...

  4. DCloud-MUI：窗口管理

    ylbtech-DCloud-MUI:窗口管理 通过预加载解决切页白屏问题,通过封装原生动画解决SPA模式的动画卡顿 1.返回顶部 1.页面初始化 在app开发中,若要使用HTML5+扩展api,必须 ...

  5. This version of MySQL doesn't yet support 'LIMIT & IN/ALL/ANY/SOME subquery

    This version of MySQL doesn't yet support 'LIMIT & IN/ALL/ANY/SOME subquery'的意思是,这版本的 MySQL 不支持使 ...

  6. Windows<小白>详细笔记

    Windows 7 部署 =========================================== ========================================== ...

  7. 数据通讯与网络 第五版第24章 传输层协议-UDP协议部分要点

    24.1 介绍 本章节主要集中于传输层协议的解读,图24.1展示TCP.UDP.SCTP在TCP\IP协议栈的位置 24.1.1 服务(Service) 每个协议都提供不同的服务,所以应该合理正确的使 ...

  8. MySQL命令学习之技巧（博主推荐）

    关于,这篇博客呢,是

  9. vue vuex初学基础 常见错误解决方式

    前端界面使用篇 vue生命周期初始化事件 http://www.cnblogs.com/lily1010/p/5830946.html 常见错误篇 1 Newline required at end ...

  10. Jenkins自动化部署.net程序

    一.安装Jenkins 百度上一大堆就不做说明了. 二.构建.net前的准备 1.安装MSBUILD.EXE插件 1.1.进去jenkins->系统管理->插件管理 1.2.配置MSBUI ...