<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Bootstrap 实例 - 水平表单</title>

        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>

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

            <div class="form-group">

                <label for="firstname" class="col-sm-2 control-label">名字</label>

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

                    <input type="text" class="form-control" id="firstname"

                           placeholder="请输入名字">

                </div>

            </div>

            <div class="form-group">

                <label for="lastname" class="col-sm-2 control-label">姓</label>

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

                    <input type="text" class="form-control" id="lastname"

                           placeholder="请输入姓">

                </div>

            </div>

            <div class="form-group">

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

                    <div class="checkbox">

                        <label>

                            <input type="checkbox"> 请记住我

                        </label>

                    </div>

                </div>

            </div>

            <div class="form-group">

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

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

                </div>

            </div>

        </form>

    </body>

</html>

吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：水平表单的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：表单帮助文本

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：表单控件大小

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：表单控件状态

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：内联表单

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：静态控件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：选择框（Select）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：复选框（Checkbox）和单选框（Radio）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：文本框（Textarea）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 【PAT甲级】1086 Tree Traversals Again (25 分)（树知二求一）

    题意:输入一个正整数N(<=30),接着输入2*N行表示栈的出入(入栈顺序表示了二叉搜索树的先序序列,出栈顺序表示了二叉搜索树的中序序列),输出后序序列. AAAAAccepted code: ...

  2. Centos7 虚拟环境安装Django 出现ImproperlyConfigured('SQLite 3.8.3 or later is required (found %s).' %Database.sqlite_version)错误

    Centos7 虚拟环境安装Django 出现SQLite版本问题 raise ImproperlyConfigured('SQLite 3.8.3 or later is required (fou ...

  3. Jmeter进行分布式性能测试

    由于Jmeter本身的瓶颈,当需要模拟数以千计的并发用户时,使用单台机器模拟所有的并发用户就有些力不从心,甚至还会引起JAVA内存溢出的错误.要解决这个问题,可以使用分布式测试,运行多台机器运行所谓的 ...

  4. 杨蓉庆201771010135《面向对象程序设计（java）》第一周学习总结

    第一部分:课程准备部分 填写课程学习 平台注册账号, 平台名称 注册账号 博客园:www.cnblogs.com 艾特大家 程序设计评测:https://pintia.cn/ 艾特你 代码托管平台:h ...

  5. SSL 证书格式普及，PEM、CER、JKS、PKCS12

    根据不同的服务器以及服务器的版本,我们需要用到不同的证书格式,就市面上主流的服务器来说,大概有以下格式: .DER .CER,文件是二进制格式,只保存证书,不保存私钥. .PEM,一般是文本格式,可保 ...

  6. javascript 原型继承 与class extends 继承对比

      //父类 Animal function Animal (name) { this.name = name; this.sleep = function () { console.log(this ...

  7. 使用docker构建第一个spring boot项目

    在看了一些简单的docker命令之后 打算自己尝试整合一下docker+spring boot项目本文是自己使用docker+spring boot 发布一个项目1.docker介绍 docke是提供 ...

  8. jquery 分页 Ajax异步

    //使用Ajax异步查询数据 <div class="table-responsive"> <table class="table table-bord ...

  9. sparksql报错

    执行时报错: org.apache.spark.sql.AnalysisException: Unable to generate an encoder for inner class `cn.itc ...

  10. PHP的isset()、is_null、empty()使用总结

    这几个变量判断函数在PHP开发中用的其实挺多的,而且粗看上去都差不多,但其实还是有不少的区别的,如果搞不清楚,也许就会遗留一些潜在的bug, 包括我自已也遇到过这样的坑,比如有一次我就遇到过用empt ...