bootstrp水平表单格式
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水平表单格式的更多相关文章
- Bootstrap系列 -- 12. 水平表单
Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右) 在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件: 1.在<form ...
- 关于bootstrap--表单(水平表单)
在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件:1.在<form>元素是使用类名“form-horizontal”.2.配合Bootstrap框架的网格系统.(网格布局 ...
- bootstrap学习笔记一 登录水平表单
先上效果图: 样式定义: <form class="form-horizontal"> <div class="control-group"& ...
- Bootstrap关于表单(二):水平表单
Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右) 在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件: 1.在<form ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单:水平表单
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- SpringMVC之reset风格和form表单格式的curd
CRUD c:create创建 r:retieve:查询 u:update:修改 d:delete:删除 rest /emp/1 get 代表查询id为1的员工 /emp/1 put 代表修改id为1 ...
- jQuery验证表单格式
工作之余整理一些工作中编写的代码,记录自己工作中的技术要点,便于自己记忆已经整合.以下是关于此jQuery验证的一些标记以及使用方法: 整个js代码都放入jquery_validate_1.1.0.j ...
- axios的post传参时,将参数转为form表单格式
import axios from 'axios'; import alert from './alert.js'; import Qs from 'qs' //引入qs 时axios的自带模块 le ...
- bootstrap 水平表单
<form class="form-horizontal" role="form"> <div class="form-group& ...
随机推荐
- 在linux中的virtualbox无法挂载usb设备的解决方法
方法来源于网络. 在安装完virtualbox之后,virtualbox会建立一个名为 vboxusers 的组,将你的用户名加入到该组即可. 命令参考: #usermod -a -G vboxuse ...
- 在 wxWidgets 的介绍中看到的一句话
3. wxwidgets提供的gui是大量使用宏的,这就意味着它是在尽可能的使用目标系统native的gui样式. ——你可以访问wxwidgets网站,看看那些开发的软件的截图,全是系统native ...
- android 学习随笔八(异常处理总结)
1.在android 中开发java.net.SocketException: socket failed: EACCES (Permission denied) 报错 第一反应就是缺少网络权限,然后 ...
- 查看linux僵尸进程
top ps -A -o stat,ppid,pid,cmd | grep -e '^[zZ]' kill -HUP 进程号
- scala多个构造函数的定义方法
直接上代码: package com.test.scalaw.test.demo /** * scala定义多个构造函数, * 另外,Scala中有只有一个主要构造函数,其他都是辅助构造函数.而且需要 ...
- Perl的基本语法<总结> (转载)
前言:这篇文章是花了我很多时间.费了我很多心血才完成的,虽然连我自己都觉得无法达到尽善尽美的境界,但希望能帮助大家入门,稍微了解到Perl 到底是个什么样的东西,Perl到底有那些强大的功能,那么这篇 ...
- nohup DEMO
nohup,顾名思义:挂起免疫. nohup命令可以防止当你退出系统时,在后台运行的进程被终止.它能让你运行的命令或脚本在你退出系统后继续在后台运行. nohup命令不能自动的将任务放在后台运行,所以 ...
- telnet不通11211端口,防火墙
问题描述: 按照官网步骤,虚拟机里安装并启动memcached, 虚拟机里自己telnet11211端口可以连接, 使用Xmanager22端口可以连接到虚拟机,但是始终telnet不同11211端口 ...
- Linux字符串替换一例:根据IP地址获取指定内容
需求:使用脚本获取到本机IP地址,需要添加iptables规则,需生成网段地址 源格式:获取IP地址为10.10.10.221 目标格式:10.10.10.0 # 方法1 [hadoop@localh ...
- 七牛开发文档php
http://developer.qiniu.com/docs/v6/sdk/php-sdk.html#overview http://developer.qiniu.com/docs/v6/sdk/ ...