<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. ubuntu搭建nfs网络文件系统

    一.NFS服务简介 NFS 是Network File System的缩写,即网络文件系统.一种使用于分散式文件系统的协定,由Sun公司开发,于1984年向外公布.功能是通过网络让不同的机器.不同的操 ...

  2. static关键字用法

    java中static关键字可用于修饰: 1.属性:表示该属性变量在类被加载时即被创建并初始化,类加载过程只进行一次,因此静态变量也只被创建一次 2.方法:静态方法为类的公有方法,可直接用‘类名.方法 ...

  3. Nginx环境中如何将HTTP跳转至HTTPS设置

    如果我们VPS服务器的WEB环境采用的是NGINX架构,那如果我们将安装SSL证书的网站希望强制跳转至HTTPS网站URL的时候那需要如何设置呢?这里个人建议是这样的,我们必须要强制一个地址,这样网站 ...

  4. 20145225唐振远 《Java程序设计》第1周学习总结——小试牛刀

    20145225唐振远<Java程序设计>第1周学习总结——小试牛刀 教材学习内容总结 1.java语言概述:一门高级编程语言. 2.java语言的三种技术构架:java SE.java ...

  5. 关于MAC系统的DNSCrypt的设置教程

    DNSCrypt的设计完全是为了解决某些网站DNS系统被污染的问题. 如图是查看本地的DNS DNS系统是一个主要领域的安全保障,因为受损数据从一个DNS服务器会导致你的系统或者无法找到需要的服务器需 ...

  6. vue.js

    一:vue的简单介绍: (1)Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件: (2)Vue.js 自身不是一个全能框架——它只聚焦于视图层.因此它非常容易学习,非 ...

  7. Coredata 的deletedObjects 方法的使用 附带终止程序的函数

    abort();//终止程序 NSFetchRequest *request = [[NSFetchRequest alloc] init]; NSEntityDescription *entity ...

  8. 用Fragment制作的Tab页面产生的UI重叠问题

    本文出处:http://blog.csdn.net/twilight041132/article/details/43812745 在用Fragment做Tab页面,发现有时候进入应用会同时显示多个T ...

  9. Mysql --分区表(5)Columns分区

    COLUMNS分区 COLUMNS分区是RANGE和LIST分区的变种.COLUMNS分区支持多列作为分区键进行分区 RANGE COLUNMS分区和LIST COLUMNS都支持非INT型列作为分区 ...

  10. Android横竖屏切换小结

    Android横竖屏切换小结 (老样子,图片啥的详细文档,可以下载后观看 http://files.cnblogs.com/franksunny/635350788930000000.pdf) And ...