关于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 ...
随机推荐
- 6.关于QT中的内存管理,动态的制作,动态库的调用,静态库的制作
一 QT的内存管理 1 QT中的内存管理是QObject来管理的 2 QT中的内存管理没有cocos2dx中的引用计数 3 组件能够指定父对象 QTimer *timer = QTime ...
- android 滚动视图(ScrollView)
为了可以让内嵌布局管理器之中加入多个显示的组件,而且又保证程序不这么冗余,所以可以通过 Activity程序进行控制,向内嵌布局管理器中添加多个组件. ScrollView提供一个显示的容器,可以包含 ...
- 基本SQL语句练习(order by,group by,having)
一.GROUP BY 和ORDER BY 1.使用Order by 进行排序,默认升序ASC,降序则使用DESC;(还可以这样:order by 1表示按第一列排序:order by 2 desc表示 ...
- Linux修改SSH连接数 重启SSH服务
系统 linux,增加SSH终端连接数最大为1000个 解决方案: vi /etc/ssh/sshd_config 输入/MaxStartups 定位到如下并修改 1) #MaxStar ...
- 关于获得本机Mac Address的方法
网络上有讲获得Mac address的方法有如下: 1. 发送ARP命令,利用返回的Mac Address缓冲区得到 2. 用NetworkInterface.GetAllNetworkInterfa ...
- javascript 冒泡和事件源 形成的事件委托
冒泡:即使通过子级元素的事件来触发父级的事件,通过阻止冒泡可以防止冒泡发生. 事件源:首先这个东西是有兼容行问题的,当然解决也很简单. 两者结合使用,形成的事件委托有两个优势: 1.减少性能消耗: 2 ...
- js动态加载html,加载后的页面元素某些事件失效的解决方案
用 live 来绑定 例如: $("#items li .addToCartimg").live("click",function(){ $('.popDeta ...
- C#Dictionary 实例
Dictionary<int, string> dc = new Dictionary<int, string>(); dc.Add(, "看了"); dc ...
- (原)torch的训练过程
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6221622.html 参考网址: http://ju.outofmemory.cn/entry/284 ...
- web标准(复习)--6 html列表
今天我们开始学习html列表,包含以下内容和知识点: ul无序和ol有序列表 改变项目符号样式或用图片定义项目符号 横向图文列表 浮动后父容器高度自适应 IE6的双倍边距bug 一.ul无序和ol有序 ...