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

时间：2022-09-01 12:52:49

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&colon;除非另外还指定了 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. &lbrack;转&rsqb;sql&colon;除非另外还指定了 TOP 或 FOR XML，否则，ORDER BY 子句在视图、内联函数、派生表、子查询

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

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

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

  5. &lbrack;每日一题&rsqb; OCP1z0-047 &colon;2013-07-30 表连接&horbar;&horbar;内联视图当作表使用

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

  6. JavaScript的DOM&lowbar;StyleSheet操作内联或链接样式表

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

  7. C&plus;&plus;语言基础&lpar;7&rpar;-inline内联函数

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

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

    在 SELECT 后加 TOP 100 PERCENT .

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

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

随机推荐

  1. 18&period;safari 安装后flash还是提示安装 flash&comma;视频不能播放

    第一步: safari---->偏好设置(首先安装最新Mac adobe flash) 第二步: 第三步:点击进入 第四步:再次打开safar,大功告成!

  2. SharePoint 2013 使用 PowerShell 更新用户

    在SharePoint开发中,经常会遇到网站部署,然而,当我们从开发环境,部署到正式环境以后,尤其是备份还原,所有用户组的用户,还依然是开发环境的,这时,我们就需要用PowerShell更新一下: P ...

  3. XCLNetTools1&period;0&lpar;ASP&period;NET常用类库&rpar;

    版权声明:本文为博主原创文章,未经博主允许不得转载. 2016-01-01开放所有源代码: 项目地址:https://github.com/xucongli1989/XCLNetTools 下载地址: ...

  4. python 操作sqlite数据库

    '''SQLite数据库是一款非常小巧的嵌入式开源数据库软件,也就是说 没有独立的维护进程,所有的维护都来自于程序本身. 在python中,使用sqlite3创建数据库的连接,当我们指定的数据库文件不 ...

  5. USB 3&period;0连接器引脚、接口定义及封装尺寸

    上篇整理了USB 2.0A型.B型和Mini USB接口定义及封装,本文补充USB 3.0接口定义,USB 3.0采用的双总线结构,在速率上已经达到4.8Gbps,所以称为Super speed,在U ...

  6. 《JAVA与模式》之命令模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述命令(Command)模式的: 命令模式属于对象的行为模式.命令模式又称为行动(Action)模式或交易(Transaction)模式. ...

  7. Spring中&commat;Value标签的使用详解

    1.@Value标签 由于Spring对通过IOC的方式对对象进行统一管理,所以对任何对象而言,其生成方法均由Spring管理.传统的方法是通过XML配置每一个Bean,并对这个Bean的所有Fiel ...

  8. SQLServer 创建服务器和数据库级别审计

    概述 在上一篇文章中已经介绍了审计的概念:本篇文章主要介绍如何创建审计,以及该收集哪些审核规范. 一.常用的审核对象 1.1.服务器审核对象 1.FAILED_LOGIN_GROUP( Audit L ...

  9. java中的二叉树排序问题

    原创:转载请注明出处 目的:想用java实现二叉树排序算法 思想:利用java中面向对象的思想,即: Tree:类 树根Tree:root //static所属于每一个Tree 左节点Tree:lef ...

  10. lua去掉字符串中的UTF-8的BOM三个字节

    废话不多说,还是先说点吧,项目中lua读取的text文件如果有BOM,客户端解析就会报错,所以我看了看,任务编辑器swGameTaskEditor 在写入文件的时候,也不知道为什么有的文件就是UTF- ...

相关文章