<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. 使用IntelliJ IDEA建立java web项目

    一.“File”->"New Project"弹出对话框,选择“Java Enterprise” 二.选择web模板 三.输入项目名 四.项目结构

  2. Swift3.0基础语法学习<五>

    异常处理: // // ViewController5.swift // SwiftBasicDemo // // Created by 思 彭 on 16/11/16. // Copyright © ...

  3. Android之ADB指令

    Android打包过程 aapt Android应用打包工具 adb Android调试桥 下面打包过程,eclipse帮我们自动打包好run as->Android application r ...

  4. Qrels supervision information以及document collection，如何划分为train、test，保证test中doc对于train来说是new document

    简单的思想:转换为最小割问题 无向图的全局最小割算法:Stoer-Wagner算法 简介见:Wiki介绍得比较好并有源代码 最小割算法:http://blog.csdn.net/markpen/art ...

  5. XE3随笔5:Format与转义字符

    unit Unit1; interface uses   Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, For ...

  6. iOS键盘出现时界面跟着往上推

    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyBoardWillShow:) name:UI ...

  7. [转]linux14.04下caffe的安装步骤

     linux14.04下caffe的安装步骤   原文地址:http://blog.csdn.net/xiaoyang19910623/article/details/52997481?locatio ...

  8. 20145225《Java程序设计》 第8周学习总结

    20145225<Java程序设计> 第八周学习总结 教材学习内容总结 第十五章 通用API 15.1日志 日志API:使用日志的起点是Logger类,要取得Logger类,必须使用Log ...

  9. 记一次Web服务的性能调优

    前言 一个项目在经历开发.测试.上线后,当时的用户规模还比较小,所以刚刚上线的项目一般会表现稳定.但是随着时间的推移,用户数量的增加,qps的增加等因素会造成项目慢慢表现出网页半天无响应的状况.在之前 ...

  10. java线程详解（一）

    1,相关概念简介 (1)进程:是一个正在执行的程序.每一个进程执行都有一个执行的顺序,该顺序就是一个执行路径,或者叫一个控制单元.用于分配空间. (2)线程:就是进程中一个独立的控制单元,线程在控制着 ...