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 压缩文件的命令总结
Linux压缩文件的读取 *.Z compress 程序压缩的档案: *.bz2 bzip2 程序压缩的档案: *.gz gzip 程序压缩的档案: *.tar ...
- 【HDNOIP】HD201404最短路径
HD201404最短路径 [试题描述] a.b.c是3个互不相等的1位正数,用它们和数字0可以填满一个n行n列的方格阵列,每格中都有4种数码中的一个.填入0的格子表示障碍物,不能属于任何路径.你是否能 ...
- Openstack的error僵尸实例的解决办法
在我们对集群环境进行各种调整的情况下,很容易产生一些僵尸实例. 僵尸实例主要是没有该主机,但是在dashboard上,数据库中存在,解决办法网络上有的人给出了繁杂的修改数据库的方法,其实按照下面的命令 ...
- [置顶] Jquery学习总结(二) jquery选择器详解
1.基本选择器 l ID 根据元素ID选择 l Elementname 根据元素名称选择 l Classname 根据元素css类名选择 举例: <input type=”text” id=”I ...
- :parent 匹配含有子元素或者文本的元素
描述: 查找所有含有子元素或者文本的 td 元素 HTML 代码: <table> <tr><td>Value 1</td><td>< ...
- java hashMap缓存简单实现
直接上代码,干货: import java.util.HashMap; import java.util.Map; /** * map缓存 * @author ming * * @param < ...
- windows win10上传文件到linux服务器
1.最直接当然使用终端secucrt和xshell putty之类的,然后使用sz rz 2.如果服务器端不支持sz rz可以使用scp命令,下面这个pscp.exe就是支持scp的,基于ssh,很好 ...
- 文本框textarea实时提示还可以输入多少文字
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...
- MongoDB Shell
MongoDB Shell 1.连接指定主机及数据库 mongo 127.0.0.1:30000/myDB 链接到127.0.0.1的30000端口的myDB 2.启动后连接指定数据库 *.&qu ...
- jqeury.base
min.js //前台调用 var $ = function (args) { return new Base(args); } //基础库 function Base(args) { //创建一个数 ...