bootstrap 基础表单 内联表单 横向表单

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <title></title>
  6.     <meta charset="utf-8">
  7.     <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">
  8. </head>
  9.  
  10. <body>
  11.     <p class="btn-primary">基础表单</p>
  12.     <form>
  13.         <fieldset>
  14.             <legend>User Login</legend>
  15.             <div class="form-group">
  16.                 <label for="">User</label>
  17.                 <input type="email" class="form-control" placeholder="this is email input">
  18.             </div>
  19.             <div class="form-group">
  20.                 <label for="">Pass</label>
  21.                 <input type="password" class="form-control" placeholder="this is for password">
  22.             </div>
  23.             <div class="checkbox">
  24.                 <label for="">
  25.                     <input type="checkbox">ABC</input>
  26.                 </label>
  27.             </div>
  28.             <button type="submit" class="btn btn-default">Login</button>
  29.         </fieldset>
  30.     </form>
  31.     <p class="btn-primary">内联表单</p>
  32.     <form class="form-inline">
  33.         <div class="form-group">
  34.             <label for="">User</label>
  35.         </div>
  36.         <div class="form-group">
  37.             <input type="text" class="form-control" placeholder="this is for user">
  38.         </div>
  39.         <div class="checkbox">
  40.             <label for="chk2">
  41.                 <input id="chk2" type="checkbox">Remember Pass</label>
  42.         </div>
  43.         <button type="submit" class="btn btn-default">Login</button>
  44.     </form>
  45.     <p class="btn-primary">横向表单</p>
  46.     <form action="" class="form-horizontal" role="form">
  47.         <div class="form-group">
  48.             <label for="account" class="col-sm-2 control-label">UserName</label>
  49.             <div class="col-sm-10">
  50.                 <input type="email" class="form-control" id="account" placeholder="account place holder">
  51.             </div>
  52.         </div>
  53.         <div class="form-group">
  54.             <div class="col-sm-offset-2 col-sm-10">
  55.                 <div class="checkbox">
  56.                     <label for="chk">
  57.                         <input id="chk" type="checkbox">remember me</label>
  58.                 </div>
  59.             </div>
  60.         </div>
  61.     </form>
  62.     <script type="text/javascript" src="dist/jQuery/jquery-1.11.3.js"></script>
  63.     <script type="text/javascript" src="dist/js/bootstrap.js"></script>
  64. </body>
  65.  
  66. </html>

bootstrap 基础表单 内联表单 横向表单的更多相关文章

  1. sql:除非另外还指定了 TOP 或 FOR XML，否则，ORDER BY 子句在视图、内联函数、派生表、子查询

    执行sql语句: select * from ( select * from tab where ID>20 order by userID desc ) as a order by date ...

  2. ORDER BY 子句在视 图、内联函数、派生表、子查询和公用表表达式中无效

    SQL语句: select * from (select distinct t2.issue,cashmoney from (select distinct issue from lot_gamepa ...

  3. [转]sql:除非另外还指定了 TOP 或 FOR XML，否则，ORDER BY 子句在视图、内联函数、派生表、子查询

    执行sql语句: select * from ( select * from tab where ID>20 order by userID desc ) as a order by date ...

  4. [sql Server]除非另外还指定了TOP 或 FOR XML，否则，ORDER BY 子句在视图、内联函数、派生表、子查询和公用表表达式中无效

    今天遇到一个奇怪的问题,项目突然要从mysql切换到sql server数据库,包含order by 子句的嵌套子查询报错. 示例:select top 10 name,age,sex from ( ...

  5. [每日一题] OCP1z0-047 :2013-07-30 表连接――内联视图当作表使用

    用sys用户登录,给oe用户授权dba,以便可以用oe用户查看执行计划: oe@OCM> conn / as sysdba Connected. sys@OCM> grant dba to ...

  6. JavaScript的DOM_StyleSheet操作内联或链接样式表

    使用 style 属性,仅仅只能获取和设置行内的样式,如果是通过内联<style>或链接<link>提供的样式规则就无可奈何了,使用 getComputedStyle 和cur ...

  7. C++语言基础(7)-inline内联函数

    函数调用是有时间和空间开销的.程序在执行一个函数之前需要做一些准备工作,要将实参.局部变量.返回地址以及若干寄存器都压入栈中,然后才能执行函数体中的代码:函数体中的代码执行完毕后还要清理现场,将之前压 ...

  8. 除非另外还指定了 TOP 或 FOR XML，否则，ORDER BY 子句在视图、内联函数、派生表、子查询和公用表表达式中无效。

    在 SELECT 后加 TOP 100 PERCENT .

  9. Code笔记之：CSS块级元素、内联元素概念

    文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...

随机推荐

  1. jQuery动态绑定

    一.原始需求 在实际项目的时候,遇到了一个问题,就是通过JS动态生成的元素,无法触发JS事件. 原始的JS代码: $(function () { $(".original").cl ...

  2. nginx的RTMP协议服务器

    nginx的RTMP协议服务器 by ahuner 通过以下的配置,可以使nginx接收RTMP流,并在web上播放实时视频. 1.openssl安装 nginx需要http_ssl_module模块 ...

  3. MFC-----在MFC中使用Picture控件加载任意图片

    对于刚刚接触OpenCV的童鞋来说,如何在MFC中加载并显示一张图片.应该是初期必定会碰到的问题之一.因此本文在分享这方面经验的同时,也相当于是写给自己的一份备忘录. 本文使用的是OpenCV2.1+ ...

  4. Android Wi-Fi Display（Miracast）介绍

    地址:http://blog.csdn.net/innost/article/details/8474683 Android Wi-Fi Display(Miracast)介绍 2012年11月中旬, ...

  5. 对STM32的NVIC_PriorityGroupConfig使用及优先级分组方式理解(转)

    源:http://blog.chinaunix.net/uid-22670933-id-3443085.html STM32有43个channel的settable的中断源:AIRC(Applicat ...

  6. 转发：iOS之textfield用法大全

    转发至:http://m.blog.csdn.net/article/details?id=8121915 //初始化textfield并设置位置及大小 UITextField *text = [[U ...

  7. 关于NSNumber对C语言字符串的简写

    2.关于NSNumber对C语言字符的简写 - 简写:对字符串进行操作返回的是NSString类型 NSLog(@"%@", @("purple")); > ...

  8. Quick Cocos2dx controller的初步实现

    很久没有记笔记了,今天记一下,最近都在瞎忙活,都不知道自己干了些啥. 我的Controller是在官方的mvc sample的里面的PlayerDualController上更改的,所以很多地方还没来 ...

  9. golang中container/heap包源码分析

    学习golang难免需要分析源码包中一些实现,下面就来说说container/heap包的源码 heap的实现使用到了小根堆,下面先对堆做个简单说明 1. 堆概念 堆是一种经过排序的完全二叉树,其中任 ...

  10. jquery toggle 替换的实现

    $('#example').click(function(){$("#exampleBox").toggle();}) 改为 $('#example').click(functio ...