<html>

 <head>

 <title>初识Bootstrap</title>

 <meta charset="utf-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

 </head>

 <body>

 <form class="form-inline" role="form">

     <div class="form-group">

         <label for="f1">账号</label>

         <input type="text" id="f1" class="form-control" placeholder="请输入账号"/>

     </div>

     <div class="form-group">

         <label for="f2">密码</label>

         <input type="password" id="f2" class="form-control" placeholder="请输入密码"/>

     </div>

     <div class="form-group">

         <label for="f3" class="sr-only">邮箱</label>

         <input type="email" class="form-control" id="f3" placeholder="请输入邮箱"/>

     </div>

     <div class="form-group">

         <label for="f4" class="sr-only">邮箱秘密</label>

         <input type="password" id="f4" placeholder="请输入邮箱密码" class="form-control"/>

     </div>

     <div class="checkbox">

         <label>

             <input type="checkbox"/>记住密码

         </label>

     </div>

     <button type="submit" class="btn btn-danger">进入</button>

 </form>

 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

 <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

 </body>

 </html>

Bootstrap中水平排列的表单form-inline的更多相关文章

  1. Bootstrap3 表单-水平排列的表单

    通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局.这样做将改变 .form-group 的行为,使其表现 ...

  2. Bootstrap~表单Form

    回到目录 在进行自己的后台改版时,大体布局都使用了bootstrap,剩下的表单部分没理由不去使用它,对于表单的美化和布局,bootstrap做的也是很不错的,有大气的边框,多功能的按钮及宏观的表单布 ...

  3. bootstrap中模态框如果放入form表单中会存在的问题

    bootstrap中模态框如果放入form表单中会存在的问题:当模态框显示时,点回车会出现表单自动提交!!!所以在使用模态框的时候要特别注意!

  4. DHTMLX 前端框架 建立你的一个应用程序 教程(九)--绑定表单Form到表格Grrid中

    绑定表单Form到表格Grrid中 现在我们需要选中一行表格数据的时候 数据能在表单中显示出来 我们可以使用DHTMLX 丰富的组件功能实现它. 绑定表单到表格 1.调用bind方法将表单绑定到网格, ...

  5. bootstrap的表单form

    (1)默认表单 <form> <div class="form-group"> <label class="control-label&qu ...

  6. HTML中的表单<form>标签

    一.HTML表单 HTML 表单用于搜集不同类型的用户输入. HTML 表单包含表单元素,表单元素指的是不同类型的 input 元素.复选框.单选按钮.提交按钮等等. 关于表单的更多内容可以参考htt ...

  7. Bootstrap入门（五）表单

    Bootstrap入门(五)表单   先引入本地的CSS文件  <link href="css/bootstrap.min.css" rel="stylesheet ...

  8. amazeui学习笔记--css（HTML元素3）--表单Form

    amazeui学习笔记--css(HTML元素3)--表单Form 一.总结 1.form样式使用:在容器上添加 .am-form class,容器里的子元素才会应用 Amaze UI 定义的样式. ...

  9. Bootstrap系列 -- 13. 内联表单

    有时候我们需要将表单的控件都在一行内显示.在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<form>元素中添加类名“form-inline”即可 如果你要在input ...

随机推荐

  1. There is no getter for property named 'NULL' in ……

    往往细节上的错误事最要命的事情,当你看着代码,逻辑上没有问题,但是却又曝出一些莫名其妙不知所以的错,你百度了 说出来的原因又是乱七八糟的鸡肋!很无助,纠结了很久,浪费了很多宝贵的时间--看代码! &l ...

  2. 用python监控Linux，CPU,内存，硬盘

    #!/usr/local/bin/python3.5 #coding:utf-8 import mailll, linecache, re, socket, os, time hostname = s ...

  3. windbg符号

    Symbol Server (Microsoft): srv*c:\mss*http://msdl.microsoft.com/download/symbols Symbol Server (Citr ...

  4. AjaxControlToolkit MaskedEdit Unspecified error 未指定错误

    使用AjaxControlToolkit 里面的 MaskedEditValidator控件,IE里面在如下的js中出现未指定(Unspecified error)错误, if (document.a ...

  5. spring 源码下载地址

    1, github: https://github.com/spring-projects/spring-framework SVN: https://github.com/spring-projec ...

  6. springMVC验证码程序

    原文地址:http://my.oschina.net/u/1757031/blog/488322 import java.awt.Color; import java.awt.Font; import ...

  7. 【Java学习笔记】Map集合的keySet，entrySet，values的用法例子

    import java.util.Collection; import java.util.HashMap; import java.util.Iterator; import java.util.M ...

  8. 内置函数 和 select练习3

    19.  查询选修"3-105"课程的成绩高于"109"号同学成绩的所有同学的记录. select * from score where cno='3-105' ...

  9. <改变未来的九大算法>读书笔记二

    原理 数据库的一致性 1.事务和代办事项表把戏(预写日志记录) 1.代办事项表把戏:先把要执行的的操作写入硬件,即写日志.即使数据库操作错误,也可根据日志来纠正.对日志的操作具有等幂性,即日志中的每项 ...

  10. [转] 基于ArcGISServer实现活动地图标注

    ——王嘉彬(Esri中国上海分公司) 1.背景 1.1.主流互联网地图应用的现状 在目前主流的互联网地图应用中,如 Google Map(图 1).搜狗地图(图2),POI 兴趣点的文字标注越来越多的 ...