在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. I/O多路转接 --- UNIX环境高级编程

    I/O多路转接技术:先构造一张有关描述符的列表,然后调用一个函数,知道这些描述符中的一个已准备好进行I/O时,给函数才返回.在返回时,它告诉进程哪些描述符已准备好可以进行I/O. poll.selec ...

  2. 从epoll构建muduo-11 单线程Reactor网络模型成型

    mini-muduo版本传送门 version 0.00 从epoll构建muduo-1 mini-muduo介绍 version 0.01 从epoll构建muduo-2 最简单的epoll ver ...

  3. xss漏洞校验

    Xss(跨站脚本攻击)大家应该已经都有所了解,下面讲讲怎样查找xss漏洞吧. 确定xss漏洞的基本方法是使用攻击字符串来验证的,例如”><script>alert(document. ...

  4. Java基础知识强化53:经典排序之选择排序(SelectionSort)

    1.选择排序的原理图: 2. 选择排序代码实现: package cn.itcast_02; /* * 数组排序之选择排序: * 从0索引开始,依次和后面元素比较,小的往前放,第一次完毕,最小值出现在 ...

  5. Linux常用命令之 查找命令 find(一)

    我们都知道在Linux中有着上千条的命令,而常用命令不过百条. 我们也知道在Linux里面“一切皆文件”,那么如何能够快速的找到你想要找的东西就显得尤为重要. find是Linux里面最重要的命令之一 ...

  6. Docker远程访问get(root)shell姿势

    0x00 概述 在用swarm来管理dockers容器集群时默认开启了2375端口,通过远程访问docker run -H tcp://ip:2375 $command 可任意执行docker命令.这 ...

  7. jstl经典用法

    jstl的forEach使用和set变量实现自增: <body> <c:set var="index" value="0" /> < ...

  8. eclipse与github建立版本关联、git使用说明

    1.在eclipse下建一个project :aa 2.打开git bush,进入aa目录下:cd /d/MyWorkspace/aa 3.git init 4.git add -A 5.git co ...

  9. Set Windows IP by Batch

    netsh interface ip set address name="Local" static 192.168.1.55 255.255.255.0 192.168.1.1 ...

  10. 《第一行代码》学习笔记35-服务Service(2)

    1.Android的UI线程不安全,想要更新应用程序里的UI元素,则须在主线程中进行,否则会出现异常. 2.Android不允许在子线程里进行UI操作,对于该情况,Android提供了一套异步消息处理 ...