在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--表单(水平表单)的更多相关文章

  1. Bootstrap系列 -- 12. 水平表单

    Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右) 在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件: 1.在<form ...

  2. Bootstrap关于表单(二):水平表单

    Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右) 在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件: 1.在<form ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单:水平表单

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. Bootstrap 表单和图片 (内联表单,表单合组,水平排列,复选框和单选框,下拉列表,校验状态,添加额外的图标,控制尺寸,图片)

    一.表单 基本格式 注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件 包括:text.password.datetime.datetime-local.date.m ...

  5. bootstrap学习笔记一 登录水平表单

    先上效果图: 样式定义: <form class="form-horizontal"> <div class="control-group"& ...

  6. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  7. bootstrap-内联表单 水平(横向)表单 响应式图片 辅助类 [转]

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. Bootstrap -- 表格样式、表单布局

    Bootstrap -- 表格样式.表单布局 1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http- ...

  9. Bootstrap知识记录:表单和图片

    一.表单Bootstrap 提供了一些丰富的表单样式供开发者使用.1.基本格式//实现基本的表单样式<form><div class="form-group"&g ...

随机推荐

  1. iOS8及以后 地图定位当前城市

    通过以下网址的步骤实现定位获取城市的功能 http://www.2cto.com/kf/201504/393312.html

  2. IOS设计模式学习(18)模板方法

    1 前言 模板方法模式是面向对象软件设计中一种非常简单的设计模式.其基本思想是在抽象类的一个方法定义“标准”算法.在这个方法中调用的基本操作由子类重载予以实现.这个方法成为“模板”.因为方法定义的算法 ...

  3. 屏幕分辨率(QQVGA、QVGA、VGA、XGA、WXGA、WUXGA和WSXGA+)

    TFT屏幕 TFT ( Thin Film Transistor 薄膜晶体管) ,是有源矩阵类型液晶显示器(AM-LCD)中的一种,TFT在液晶的背部设置特殊光管,能够“主动的”对屏幕上的各个独立的象 ...

  4. ios8中百度推送接收不到

    ios8中百度推送接收类型会有所改变: //消息推送注冊 if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 8.0) { ...

  5. 苹果有益让老iPhone变慢以迫使消费者购买新一代的iPhone?

    首先,来一组来自谷歌Trends的图片.(谷歌Trends记录了某段时间内相关关键词搜索的次数.) 假设你做数据,那么你应该会有些感觉. 特别是第一幅图,它规律似乎比第二幅更明显,第二幅图仅仅是一个普 ...

  6. HDU 1015 Safecracker 解决问题的方法

    Problem Description === Op tech briefing, 2002/11/02 06:42 CST ===  "The item is locked in a Kl ...

  7. magento产品eav笔记【持续跟新...】

    //magento把产品信息分在子表中,最顶上的表是catalog_product_entity,仅仅包含产品的信息(SKU) //表eav_attribute,这张表在magento里为全部不 同的 ...

  8. MVC实现类似QQ的网页聊天功能-Ajax(上)

    说到QQ聊天,程序员首先想到的就是如何实现长连接,及时的接收并回馈信息.那么首先想到的就是Ajax,Ajax的运行机制是通过XMLHttpRequest向服务器发出异步请求,并接受数据,这样就可以实现 ...

  9. C#中的一些技巧

    VS编辑器的虚线如何设置和取消:使用快捷键Ctrl+E+C VS自带的反编译工具是什么:il dasm

  10. 填坑 - 使用Entity Framework 6 + Sqlite进行DB first开发

    Sqlite团队也是渣啊,到第6代了还不支持Code First. 1.安装运行环境和组件 .安装SQLite的Visual Studio设计器支持 只有安装了它,在[新建ADO.NET实体数据模型] ...