关于bootstrap--表单(水平表单)
在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件:
1、在<form>元素是使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。(网格布局会在以后的章节中详细讲解)
在<form>元素上使用类名“form-horizontal”主要有以下几个作用:
1、设置表单控件padding和margin值。
2、改变“form-group”的表现形式,类似于网格系统的“row”。
- <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="btnbtn-default">进入邮箱</button>
- </div>
- </div>
- </form>
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
关于bootstrap--表单(水平表单)的更多相关文章
- Bootstrap系列 -- 12. 水平表单
Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右) 在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件: 1.在<form ...
- Bootstrap关于表单(二):水平表单
Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右) 在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件: 1.在<form ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单:水平表单
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Bootstrap 表单和图片 (内联表单,表单合组,水平排列,复选框和单选框,下拉列表,校验状态,添加额外的图标,控制尺寸,图片)
一.表单 基本格式 注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件 包括:text.password.datetime.datetime-local.date.m ...
- bootstrap学习笔记一 登录水平表单
先上效果图: 样式定义: <form class="form-horizontal"> <div class="control-group"& ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- bootstrap-内联表单 水平(横向)表单 响应式图片 辅助类 [转]
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Bootstrap -- 表格样式、表单布局
Bootstrap -- 表格样式.表单布局 1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http- ...
- Bootstrap知识记录:表单和图片
一.表单Bootstrap 提供了一些丰富的表单样式供开发者使用.1.基本格式//实现基本的表单样式<form><div class="form-group"&g ...
随机推荐
- tomcat端口占用后的解决办法
学 习网页设计的同学都会用到tomcat这个软件,在安装的时候我们一般都会选择端口为8080端口,这个端口一般情况下是不会有程序占用的,所以我们运行 tomcat不会出现什么问题,但是如果一旦别占用, ...
- JS~模拟表单在新窗口打开,避免广告拦截
说起广告拦截,这应该是浏览器的一个特性,它会将window.open产生的窗口默认为一个广告,将它进行拦截,但有时,这不是我们所希望的,有时,我们就是需要它在客户端的浏览器上弹出一个新窗口,以展示数据 ...
- Android中AsyncTask的简单用法 .
在开发Android应用时必须遵守单线程模型的原则: Android UI操作并不是线程安全的并且这些操作必须在UI线程中执行.在单线程模型中始终要记住两条法则: 1. 不要阻塞UI线程 2. 确保只 ...
- VS2010旗舰版安装图解
微软公布了最新的 Visual Studio 2010 软件开发编程平台及 .Net Framework 4 框架.这次 VisualStudio 2010 包含 Professional 专业版.P ...
- cdh4.1.2 hadoop和oozie集成问题
1.异常信息例如以下: Caused by: com.google.protobuf.ServiceException: java.net.ConnectException: Call From sl ...
- [React] React Router: Redirect
The Redirect component in react-router does exactly what it sounds like. It allows us to redirect fr ...
- [Angular 2] Filter items with a custom search Pipe in Angular 2
This lessons implements the Search Pipe with a new SearchBox component so you can search through eac ...
- WSAWaitForMultipleEvents()
简述:只要指定事件对象中的一个或全部处于有信号状态,或者超时间隔到,则返回. #include <winsock2.h> DWORD WSAAPI WSAWaitForMultipleEv ...
- (转)Facade模式
Facade模式要求一个子系统的外部与其内部的通信必须通过一个统一的Facade对象进行.Facade模式提供一个高层次的接口,使得子系统更易于使用. 就如同医院的接待员一样,Facade模式的Fac ...
- 第一个Delphi小程序
第一次应工作需呀,接触这个语言,今晚在自己的电脑搭建好环境,写的第一个超简单的Delphi小程序! var temp:Integer; //求个位数 procedure TForm1.BitBtn1C ...