<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. ios NSThred多线程简单使用

    关于NSThred开启多线程的方法 - (void)performSelectorInBackground:(SEL)aSelector withObject:(id)arg [self perfor ...

  2. Angular.js参考

    http://www.cnblogs.com/popo123/p/5673955.html

  3. spring访问静态资源文件

    用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题,那就是程序数据都已经查询出来了,但界面样式仍然十分丑陋,加载不了 css,js,图片等资源文件.当你在浏览器上直接输入某个css文 ...

  4. C++矩阵运算库armadillo配置笔记

    前言 最近在用C++实现神经网络模型,优化算法需要用到矩阵操作,一开始我用的是boost的ublas库,但用着用着感觉很不习惯,接口不够友好.于是上网搜索矩阵运算哪家强,大神们都推荐armadillo ...

  5. php插入排序

    //php版插入排序 $arr=array('','5','3','7','6','4','8','2');     for($i=2;$i<count($arr);$i++)     {   ...

  6. 用PHP实现URL转换短网址的算法示例

    短网址就是把一个长的地址转换在超级短的网址,然后访问短网址即可跳转到长网址了,下面来看用PHP实现URL转换短网址的算法与例子. 短网址(Short URL) ,顾名思义就是在形式上比较短的网址.在W ...

  7. JAVA基础之两种核心机制

    突然之间需要学习Java,学校里学的东西早就忘记了,得用最短的时间把Java知识理顺,重点还是J2EE,毕竟所有的ava项目中95%都是J2EE,还是先从基础的J2SE学起吧....... 首先是了解 ...

  8. Git平台使用时的配置分析

    Git仓库的配制文件分为三个部分: 1. .git/config:指定仓库配置(特定于某个仓库),获取或设置时使用--file参数(或者省去). 2. ~/.gitconfig:用户级别仓库配置(适用 ...

  9. BestCoder Round #87 1001

    GCD is Funny Accepts: 524 Submissions: 1147 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 655 ...

  10. web兼容性测试

    1.前端的兼容性问题 a. 客户端操作系统 -pc电脑 -windows -mac os -Linux -平板 -手机 -智能终端 -响应式布局  借助于css3 b.客户端浏览器 IE firefo ...