Bootstrap_表单_表单样式
一、基础表单
<form >
<div class="form-group">
<label>邮箱:</label>
<input type="email" class="form-control" placeholder="请输入您的邮箱地址">
</div>
<div class="form-group">
<label >密码</label>
<input type="password" class="form-control" placeholder="请输入您的邮箱密码">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 记住密码
</label>
</div>
<button type="submit" class="btn btn-default">进入邮箱</button>
</form>
表单除了这几个元素之外,还有input、select、textarea等元素,在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果。
1、宽度变成了100%
2、设置了一个浅灰色(#ccc)的边框
3、具有4px的圆角
4、设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化
5、设置了placeholder的颜色为#999
二、水平表单
Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右)。
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">邮箱:</label>
<div class="col-sm-4">
<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-4">
<input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
</div>
</div>
</form>
在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件:
1、在<form>元素是使用类名“.form-horizontal”。
2、配合Bootstrap框架的网格系统。
在<form>元素上使用类名“.form-horizontal”主要有以下几个作用:
1、设置表单控件padding和margin值。
2、改变“form-group”的表现形式,类似于网格系统的“row”。
三、内联表单
有时候我们需要将表单的控件都在一行内显示
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">邮箱</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">密码</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
</div>
<button type="submit" class="btn btn-default">进入邮箱</button>
</form>
在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<form>元素中添加类名“.form-inline”即可。
如果你要在input前面添加一个label标签时,会导致input换行显示。如果你必须添加这样的一个label标签,并且不想让input换行,你需要将label标签也放在容器“form-group”中。
Bootstrap_表单_表单样式的更多相关文章
- Bootstrap_表单_表单提示信息
平常在制作表单验证时,要提供不同的提示信息.在Bootstrap框架中也提供了这样的效果.使用了一个"help-block"样式,将提示信息以块状显示,并且显示在控件底部. < ...
- Bootstrap_表单_表单控件状态
一.焦点状态 焦点状态是通过伪类“:focus”来实现.Bootstrap框架中表单控件的焦点状态删除了outline的默认样式,重新添加阴影效果. <form role="form& ...
- Bootstrap_表单_表单控件
一.输入框input 单行输入框,常见的文本输入框,也就是input的type属性值为text. 在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确 ...
- SpringBoot(五)_表单验证
SpringBoot(五)_表单验证 参数校验在我们日常开发中非常常见,最基本的校验有判断属性是否为空.长度是否符合要求等,在传统的开发模式中需要写一堆的 if else 来处理这些逻辑,很繁琐,效率 ...
- 走进AngularJs 表单及表单验证
年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...
- 走进AngularJs(九)表单及表单验证
年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...
- Bootstrap 表单和图片 (内联表单,表单合组,水平排列,复选框和单选框,下拉列表,校验状态,添加额外的图标,控制尺寸,图片)
一.表单 基本格式 注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件 包括:text.password.datetime.datetime-local.date.m ...
- Day055--MySQL--外键的变种,表与表的关系,单表查询,多表查询, 内连接,左右连接,全外连接
表和表的关系 ---- 外键的变种 * 一对多或多对一 多对多 一对一 参考 https://www.cnblogs.com/majj/p/9169416.html 如何找出两张表之间的关系 分析步骤 ...
- python mysql 单表查询 多表查询
一.外键 变种: 三种关系: 多对一 站在左表的角度: (1)一个员工 能不能在 多个部门? 不成立 (2)多个员工 能不能在 一个部门? 成立 只要有一个条件成立:多 对 一或者是1对多 如果两个条 ...
随机推荐
- 《算法问题实战策略》——chaper9——动态规划法技巧
Q1: 数字游戏: 两个人(A.B)用n个整数排成的一排棋盘玩游戏,游戏从A开始,每个人有如下操作: (1) 拿走棋盘最右侧或者最左侧的棋子,被拿走的数字从棋盘中抹掉. (2) 棋盘中还剩 ...
- Spark RDD概念学习系列之Spark Hash Shuffle内幕彻底解密(二十)
本博文的主要内容: 1.Hash Shuffle彻底解密 2.Shuffle Pluggable解密 3.Sorted Shuffle解密 4.Shuffle性能优化 一:到底什么是Shuffle? ...
- [转载]opencv MSER
最大稳定极值区域(MSER-Maximally Stable Extremal Regions)可以用于图像的斑点区域检测.该算法最早是由Matas等人于2002年提出,它是基于分水岭的概念. MSE ...
- 去除 Visual Studio 中臃肿的 ipch 和 sdf 文件
使用VS2010建立C++解决方案时,会生成SolutionName.sdf和一个叫做ipch的文件夹,这两个文件再加上*.pch等文件使得工程变得非常的庞大,一个简单的程序都会占用几十M的硬盘容量, ...
- Erasing Edges - SGU 136(构造多边形)
题目大意:已知一个多边形上的每条边的中点,还原出来一个多边形. 分析:因为偶数是不固定的,所以可以为任意起点,奇数只有一个,可以所有中点加减算出来第一个点,然后就是简单的向量计算点的位置了...... ...
- ios打包ipa的四种实用方法
总结一下,目前.app包转为.ipa包的方法有以下几种: 1.Apple推荐的方式,即实用xcode的archive功能 Xcode菜单栏->Product->Archive->三选 ...
- 【MySQL性能优化】改进MySQL Order By Rand()的低效率
<a href="http://click.aliyun.com/m/9153/">点击查看原文</a> 正 文: 最近由于需要研究了一下MYSQL的随 ...
- JAVA IO详解
[案例1]创建一个新文件 1 2 3 4 5 6 7 8 9 10 11 import java.io.*; class hello{ public static void main(Stri ...
- win8 64位 mysql安装 Configuration file my.ini error code -1
问题如题,解决方法: 1.由于目录中纯在中文,所以导致代码错误.故而把目录设置成全英文的. 2.下载64位mysql安装,安装32位mysql也会出现此问题.
- HDU2255 奔小康赚大钱【二分图最佳匹配】
题目链接: http://acm.hdu.edu.cn/showproblem.php? pid=2255 题目大意: 村里要分房子. 有N家老百姓,刚好有N间房子.考虑到每家都要有房住,每家必须分配 ...