在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件:
1、在<form>元素是使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。(网格布局会在以后的章节中详细讲解)

在<form>元素上使用类名“form-horizontal”主要有以下几个作用:
1、设置表单控件padding和margin值。
2、改变“form-group”的表现形式,类似于网格系统的“row”。

  1. <form class="form-horizontal" role="form">
  2. <div class="form-group">
  3. <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
  4. <div class="col-sm-10">
  5. <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
  6. </div>
  7. </div>
  8. <div class="form-group">
  9. <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
  10. <div class="col-sm-10">
  11. <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
  12. </div>
  13. </div>
  14. <div class="form-group">
  15. <div class="col-sm-offset-2 col-sm-10">
  16. <div class="checkbox">
  17. <label>
  18. <input type="checkbox">记住密码
  19. </label>
  20. </div>
  21. </div>
  22. </div>
  23. <div class="form-group">
  24. <div class="col-sm-offset-2 col-sm-10">
  25. <button type="submit" class="btnbtn-default">进入邮箱</button>
  26. </div>
  27. </div>
  28. </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. tomcat端口占用后的解决办法

    学 习网页设计的同学都会用到tomcat这个软件,在安装的时候我们一般都会选择端口为8080端口,这个端口一般情况下是不会有程序占用的,所以我们运行 tomcat不会出现什么问题,但是如果一旦别占用, ...

  2. JS~模拟表单在新窗口打开,避免广告拦截

    说起广告拦截,这应该是浏览器的一个特性,它会将window.open产生的窗口默认为一个广告,将它进行拦截,但有时,这不是我们所希望的,有时,我们就是需要它在客户端的浏览器上弹出一个新窗口,以展示数据 ...

  3. Android中AsyncTask的简单用法 .

    在开发Android应用时必须遵守单线程模型的原则: Android UI操作并不是线程安全的并且这些操作必须在UI线程中执行.在单线程模型中始终要记住两条法则: 1. 不要阻塞UI线程 2. 确保只 ...

  4. VS2010旗舰版安装图解

    微软公布了最新的 Visual Studio 2010 软件开发编程平台及 .Net Framework 4 框架.这次 VisualStudio 2010 包含 Professional 专业版.P ...

  5. cdh4.1.2 hadoop和oozie集成问题

    1.异常信息例如以下: Caused by: com.google.protobuf.ServiceException: java.net.ConnectException: Call From sl ...

  6. [React] React Router: Redirect

    The Redirect component in react-router does exactly what it sounds like. It allows us to redirect fr ...

  7. [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 ...

  8. WSAWaitForMultipleEvents()

    简述:只要指定事件对象中的一个或全部处于有信号状态,或者超时间隔到,则返回. #include <winsock2.h> DWORD WSAAPI WSAWaitForMultipleEv ...

  9. (转)Facade模式

    Facade模式要求一个子系统的外部与其内部的通信必须通过一个统一的Facade对象进行.Facade模式提供一个高层次的接口,使得子系统更易于使用. 就如同医院的接待员一样,Facade模式的Fac ...

  10. 第一个Delphi小程序

    第一次应工作需呀,接触这个语言,今晚在自己的电脑搭建好环境,写的第一个超简单的Delphi小程序! var temp:Integer; //求个位数 procedure TForm1.BitBtn1C ...