<!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. 洛谷 P1043 数字游戏（区间dp）

    题目链接:https://www.luogu.com.cn/problem/P1043 这道题与石子合并很类似,都是把一个环强制改成一个链,然后在链上做区间dp 要初始化出1~2n的前缀和,方便在O( ...

  2. 【原创】Centos配置turn服务器

    使用ssh工具,进入命令行,安装下面的就是可以配置turn-server(coturn) 转请注明出处. 1.安装centos必须的库文件      yum install -y make gcc c ...

  3. 批量给文件加一个后缀 .bak , 一条命令去掉文件的后缀 linux

    给当前文件夹下面的所有文件加上一个后缀 == 一条命令解决 ll | awk '{print $9}' | grep -v '^[ ]*$' |sed -r 's#(.*)#mv \1 \1.bak# ...

  4. JAVA 通过POI 模版，导出excel

    如有不足,欢迎指正,谢谢 ! 1.Maven引入  POI jar包.模版和结果文件.rar下载 <dependency> <groupId>org.apache.poi< ...

  5. 01背包第k最优解

    附题目链接:Bone Collector II Input The first line contain a integer T , the number of cases.Followed by T ...

  6. 某元素 fixed 后，从页面消失

    position: fixed; top: 0; left: 0; width: 100%; z-index: 1; 一开始是定位后,元素就从页面消失了,添加了 层级 之后就可以了.

  7. Flask - 底层原理和基本流程

    一. flask依赖wsgi,实现wsgi的模块:wsgiref(django),werkzeug(flask),uwsgi 1. werkzeug示例 from werkzeug.wrappers ...

  8. 关于window.location.href页面跳转的坑

    "window.location.href"."location.href"是本页面跳转 "parent.location.href"是上一 ...

  9. SpringBoot与Jpa入门

    一.JPA简介 目前JPA主要实现由hibernate和openJPA等. Spring Data JPA 是Spring Data 的一个子项目,它通过提供基于JPA的Repository极大了减少 ...

  10. 从零构建以太坊（Ethereum）智能合约到项目实战——第20章 搭建自己的私有链网络

    P75 .1-以太坊私网建立 .合约编译.部署完全教程(1) 使用此博文进行安装配置:https://blog.csdn.net/w88193363/article/details/79402074 ...