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. HDU 5534 完全背包

    Partial Tree Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)To ...

  2. Halcon相关

      1.Halcon的自我描述 Program Logic Ø Each program consists of a sequence of HALCON operators Ø The progra ...

  3. Myeclipse配置优化

    http://blog.csdn.net/chen_zw/article/details/7525277

  4. eclipse proxy

    -Dorg.eclipse.ecf.provider.filetransfer.excludeContributors=org.eclipse.ecf.provider.filetransfer.ht ...

  5. C++ Builder多线程编程技术经验谈（转）

    源:C++ Builder多线程编程技术经验谈 线程之可行性   在很多情况下,可能需要为程序创建线程.这里给出其中一些可能性: (1)如果创建的是一个多文档接口(Multiple Document ...

  6. 读 《我为什么放弃Go语言》 有感

    最近又熟悉了下go语言,发现go语言还有许多设计不好的地方,然后又读到了<我为什么放弃Go语言>这篇文章, 对于某些方面,我还是比较认同的. 这篇文章总结了十六点,如下: 1.1 不允许左 ...

  7. SQLSERVER设置行号

    select row_number()over(order by columnname)as rownum,* from tablename 按照columnname列进行排列

  8. STL优先队列的使用

    STL中有一个优先队列的容器可以使用. [头文件] queue 队列容器 vector 向量容器 [操作] 优先级队列支持的操作 q.empty()         如果队列为空,则返回true,否则 ...

  9. [转] SpringJdbc的几种不同的用法

    转自:http://vsp.iteye.com/blog/1182887 Spring对jdbc做了良好的封装,本人在学习时做了以下几种方式的尝试 首页先来创建一个dao接口 package com. ...

  10. hibernate--一对多 多对一 双向关联 (重点!!!)

    一方 group: package com.bjsxt.hibernate; import java.util.HashSet; import java.util.Set; import javax. ...