Bootstrap关于表单（二）：水平表单

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关于表单（二）：水平表单的更多相关文章

关于bootstrap--表单（水平表单）
在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件:1.在<form>元素是使用类名“form-horizontal”.2.配合Bootstrap框架的网格系统.(网格布局 ...
Excel：一维表和二维表互转
一.一维表转二维表数据源: 一份流水账式的值班表,为了便于打印张贴,现在需要使其变成这样的样式: 也就是从一维表变成传说中的二维表. 1.新建查询依次单击[数据]→[新建查询] →[从文件]→[从 ...
SQL Server 表分区之水平表分区
什么是表分区? 表分区分为水平表分区和垂直表分区,水平表分区就是将一个具有大量数据的表,进行拆分为具有相同表结构的若干个表:而垂直表分区就是把一个拥有多个字段的表,根据需要进行拆分列,然后根据某一个字 ...
linux 进阶2--C++读取lua文件中的变量、一维表、二维表
lua 语言非常灵活,一般把lua 作为脚本文件,会用C++与之进行交互.最重要的是C++代码能读取到脚本中的变量.一维表.二维表. 这样有些参数就可以在lua文件进行更改,而不用重新更改C++代码. ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：水平表单
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
bootstrap学习笔记一登录水平表单
先上效果图: 样式定义: <form class="form-horizontal"> <div class="control-group"& ...
Django day08 多表操作 (二) 添加表记录
一: 一对多 1. 一对多新增两种方式: publish = 对象 publish_id = id 1. publish_id 和 publish 的区别就是: 1)publish_id 可 ...
Bootstrap系列 -- 12. 水平表单
Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右) 在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件: 1.在<form ...
SQL Server表分区（水平分区及垂直分区)
什么是表分区? 表分区分为水平表分区和垂直表分区,水平表分区就是将一个具有大量数据的表,进行拆分为具有相同表结构的若干个表:而垂直表分区就是把一个拥有多个字段的表,根据需要进行拆分列,然后根据某一个字 ...

随机推荐

iOS刷新某个cell时候crash
//一个section刷新 NSIndexSet *indexSet=[[NSIndexSet alloc]initWithIndex:2]; [tableview reloadSec ...
Linux批量生成生成帐户脚本,随机密码
此脚本应用于生产环境下生成帐户,也可生成成百上千个密码相同的帐户.脚本代码如下: 批量生成: #!/bin/bash for name in tom jerry joe jane do useradd ...
Android系统Recovery工作原理之使用update.zip升级过程分析（九）---updater-script脚本语法简介以及执行流程【转】
本文转载自:http://blog.csdn.net/mu0206mu/article/details/7465603 Android系统Recovery工作原理之使用update.zip ...
B1391 [Ceoi2008]order 最大权闭合图最小割
啊啊啊,假的题吧!!!我用的当前弧优化T了6个点,其他人不用优化AC!!!震惊!!!当前弧优化是假的吧!!! 到现在我也没调出来...大家帮我看看为啥70.... 来讲一下这个题的思路,就是设一个源点 ...
认证与授权协议对比：OAuth2、OpenID、SMAL
认证授权是目前大多数系统都必须要实现都功能,认证就是验证用户都身份,授权就是验证身份后对受限资源的访问控制.最开始是单个平台要做,后来在互联网时代到来,一个账户可登陆多个平台,然后是各种开放平台账户共 ...
python Paramiko 模块远程管理主机
#!/usr/bin/env python3 # -*- coding: utf-8 -*- import paramiko import os, stat import sys import ope ...
@RequestBody接收的是一个json对象
一直以为在SpringMVC环境中,@RequestBody接收的是一个json对象,调试代码时没有成功,后来才发现,其实 @RequestBody接收的是一个json字符串,而不是一个json对象. ...
洛谷 P2986 [USACO10MAR]Great Cow Gat…(树形dp+容斥原理)
P2986 [USACO10MAR]伟大的奶牛聚集Great Cow Gat… 题目描述 Bessie is planning the annual Great Cow Gathering for c ...
浅谈自学Python之路（day3）
今天的主要内容是: 撒文件操作对文件操作的流程: 打开文件,得到文件句柄并赋值给一个变量通过句柄对文件进行操作关闭文件现有文件如下: tonghuazhen 听说白雪公主在逃跑小红帽在担心 ...

Bootstrap关于表单（二）：水平表单

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

随机推荐

热门专题