<!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. MySQL忘记密码（终极解决方法，亲测有效，windows版本）

    1.进入mysql的bin目录 2.net stop mysql 3.mysqld --skip-grant-tables 输入 mysqld --skip-grant-tables 回车. (--s ...

  2. php与js的false类型

    php除了下面列出来的情况是false  其余情况都可以看成true 包括NaN 和 空资源 整数 0 浮点数 0.0 空字符串 '' 或者'0' false 空数组 NULL类型 空标生成Simpl ...

  3. C语言：将s所指字符串中下标为偶数同时ASCII值为奇数的字符删去，-将a所指字符串中的字符和b所指字符串中的字符的顺序交叉，-将形参s所指字符串中的所有数字字符顺序前移，

    //函数fun功能:将s所指字符串中下标为偶数同时ASCII值为奇数的字符删去,s所指串中剩余的字符形成的新串放在t所指的数组中. #include <stdio.h> #include ...

  4. 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 ...

  5. Java Web 笔记（杂）

    Java Web 概述 什么是Java Web 在Sun的Java Servlet 规范中,对Java Web 应用做了这样的定义: "Java Web" 应用由一组Servlet ...

  6. JavaSE复习~常量、变量、关键字、标识符

    标识符.关键字 标识符:指程序中为了代表一些东西,用户自己定义的名字 关键字:系统预先定义的一些具有特殊意义的标识符, 保留字:系统预先定义,不作为关键字,也不允许用户使用 Java中的关键字: 标识 ...

  7. POJ 1204 Word Puzzles（AC自动机）

    这题的数据卡在,如下: 5 5 3 ABCDE FGHIJ KLMNO PQRST UVWXY PQR RS RST puzzle中间的行中可以包含要查询的多个单词.这个问题很好解决,SearchDf ...

  8. 一个arctan积分的两种解法

    \[\Large\int_{0}^{1}\frac{\arctan x}{\sqrt{1-x^{2}}}\mathrm{d}x\] \(\Large\mathbf{Solution:}\) 首先第一种 ...

  9. 后端——框架——持久层框架——Mybatis——补充——pageHelper(分页)插件

    Pagehelper插件的知识点大致可以分为三个部分 搭建环境,引入jar包,配置. 使用方式,只需要记住一种即可.类似于在写SQL语句中,可以left join,也可以right join,它们实现 ...

  10. 基于通用二进制方式安装MySQL-5.7.24(比源码安装MySQL快许多)及破密码

    确保系统中有依赖的libaio软件 yum -y install libaio 使用wget命令下载mysql-5.7.24软件包 wget http://mirrors.sohu.com/mysql ...