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

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">

</head>

<body>

    <p class="btn-primary">基础表单</p>

    <form>

        <fieldset>

            <legend>User Login</legend>

            <div class="form-group">

                <label for="">User</label>

                <input type="email" class="form-control" placeholder="this is email input">

            </div>

            <div class="form-group">

                <label for="">Pass</label>

                <input type="password" class="form-control" placeholder="this is for password">

            </div>

            <div class="checkbox">

                <label for="">

                    <input type="checkbox">ABC</input>

                </label>

            </div>

            <button type="submit" class="btn btn-default">Login</button>

        </fieldset>

    </form>

    <p class="btn-primary">内联表单</p>

    <form class="form-inline">

        <div class="form-group">

            <label for="">User</label>

        </div>

        <div class="form-group">

            <input type="text" class="form-control" placeholder="this is for user">

        </div>

        <div class="checkbox">

            <label for="chk2">

                <input id="chk2" type="checkbox">Remember Pass</label>

        </div>

        <button type="submit" class="btn btn-default">Login</button>

    </form>

    <p class="btn-primary">横向表单</p>

    <form action="" class="form-horizontal" role="form">

        <div class="form-group">

            <label for="account" class="col-sm-2 control-label">UserName</label>

            <div class="col-sm-10">

                <input type="email" class="form-control" id="account" placeholder="account place holder">

            </div>

        </div>

        <div class="form-group">

            <div class="col-sm-offset-2 col-sm-10">

                <div class="checkbox">

                    <label for="chk">

                        <input id="chk" type="checkbox">remember me</label>

                </div>

            </div>

        </div>

    </form>

    <script type="text/javascript" src="dist/jQuery/jquery-1.11.3.js"></script>

    <script type="text/javascript" src="dist/js/bootstrap.js"></script>

</body>

</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. javascript类的继承

    1.构造函数方式写类,通过方法调用复制父类属性/字段到子类 实现继承 这里父类,子类都采用构造函数方式写,不用原型.子类调用父类函数来复制父类的属性. 1 2 3 4 5 6 7 8 9 10 11 ...

  2. 天梯赛决赛 L2-1.红色警报 并查集

    L2-013. 红色警报 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 战争中保持各个城市间的连通性非常重要.本题要求你编写一 ...

  3. 定制化jQuery

    毋庸置疑,jQuery很强大,很方便,但是......越来越臃肿,怎么办?,jquery只基于模块化开发的,可以通过工具定制jquery,选择你需要的模块即可. 下面这个网站可以帮你完成定制 http ...

  4. Struts2--Action属性接收参数

    1. JSP文件调用格式: <a href="user/user!add?name=a&age=8">添加用户</a> 2. struts.xml文 ...

  5. 计算机学院大学生程序设计竞赛（2015’12） 1002 Polygon

    #include<iostream> #include<cstring> #include<cstdio> #include<cmath> #inclu ...

  6. nginx 红黑树详解

    1 介绍 这部分终于整理完了,太耗时间了,留下来备忘吧! 之前看STL源码时,只是研究了红黑树的插入部分.在stl源码剖析的书中,也没有涉及到删除操作的分析,这次对删除操作也进行了详细的研究, 并且还 ...

  7. highcharts第一篇---简介和使用

    Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用.HighCh ...

  8. 建立一个属于自己的AVR的RTOS

    建立一个属于自己的AVR的RTOS(序) 建立一个属于自己的AVR的RTOS(第一篇:函数的运行) 建立一个属于自己的AVR的RTOS(第二篇:人工堆栈) 建立一个属于自己的AVR的RTOS(第三篇: ...

  9. CollapsingToolbarLayout学习笔记

    CollapsingToolbarLayout包裹 Toolbar 的时候提供一个可折叠的 Toolbar,一般作为AppbarLayout的子视图使用. <?xml version=" ...

  10. #Pragma Pack(n)与内存分配

    #pragma pack(n) 解释一: 每个特定平台上的编译器都有自己的默认"对齐系数"(也叫对齐模数).程序员可以通过预编译命令#pragma pack(n),n=1,2,4, ...