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. 深入理解viewport（转）

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或 ...

  2. STM8不用手动复位进入自带Bootloader方法（串口下载）

    源:STM8不用手动复位进入自带Bootloader方法(串口下载) STM8不用手动复位进入自带Bootloader方法(串口下载)除非STM8片子的空的,如果复位运行的是自带Bootloader, ...

  3. phpstrom 快捷键

    常用的PHPStorm快捷键:ctrl+j 插入活动代码提示ctrl+alt+t 当前位置插入环绕代码alt+insert 生成代码菜单ctrl+q 查看代码注释ctrl+d 复制当前行ctrl+y ...

  4. javascript 中获取对象的长度（map对象的长度）--js关联数组的长度

    var n = {1:100, 2:101, 3:102, 4:103}; 怎么获取这个对象n的长度呢? 方法一: function getLength(obj){ var count = 0; fo ...

  5. 创建git密钥的时候提示 too many arguments

    这个时候只要这样做就ok了, 给邮箱包两层引号,如下: " 'zhangsanfeng@qq.com' " 妥妥的!

  6. Unity3d/2d手机游戏开发第二版 (金玺曾) 随书资源

    http://pan.baidu.com/s/1c0xpn4s Unity3d2d手机游戏开发配书资源文件.rar 1.36G 书上的链接坏掉了,我在论坛上面买了一份,放这分享给买了书找不到资源的同学 ...

  7. HTML学习二（基础）

    HTML标题标题(Heading)是通过<h1>-<h6>等标签进行定义的<h1>定义最大标题<h6>定义最小标题注释:浏览器会自动地在标题的前后添加空 ...

  8. 1、手把手教你Extjs5(一)搭建ExtJS5环境

    Ext JS 5 的主要特性包括: 新的数据绑定方式 新增支持 MVVM 模式,并且依然支持 MVC 模式 对手持设备更友好,针对触屏设备进行优化 新的主题 Crisp / Neptune Touch ...

  9. Ubuntu下搭建C++开发环境

    Ubuntu使用eclipse搭建c/c++编译环境----CDT插件 Ubuntu(Linux)使用Eclipse搭建C/C++编译环境          这两天,给自己电脑弄了双系统,除了原来的W ...

  10. Android studio开多个窗口引起的问题

    1.clean 的时候,intermediates删不掉 2.出现:app:compile_DebugJavaWithJavac 没有具体错误 出现以上问题的时候只要把多余的删除,记得只留一个在当前窗 ...