<!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. https://www.cnblogs.com/lfs2640666960/p/8529115.html

    https://www.cnblogs.com/lfs2640666960/p/8529115.html

  2. 解决STM32工程出现：Undefined symbol TIM_ClearFlag (referred from hcsr04.o).错误。类型问题Undefined symbol TIM_xxx (referred from xxx.o).

    出错原因: 工程FWLIB目录下没有添加stm32f10x_tim.c文件. 添加即可. 一般利用库开发,将ppp.c(ppp.c又调用了库stm32f10x_xx.h)写好之后的调用步骤: 举例使用 ...

  3. spring 参数校验

    1.了解下资源文件加载 MessageSource   需要国际化处理时使用这个类 (在需要处理国际化的地方使用messageSource.getMessage(this.getResponseCod ...

  4. 吴裕雄 python 神经网络——TensorFlow 数据集高层操作

    import tempfile import tensorflow as tf train_files = tf.train.match_filenames_once("E:\\output ...

  5. Educational Codeforces Round 80 C. Two Arrays（组合数快速取模）

    You are given two integers nn and mm . Calculate the number of pairs of arrays (a,b)(a,b) such that: ...

  6. leetCode练题——21. Merge Two Sorted Lists（照搬大神做法）

    1.题目 21. Merge Two Sorted Lists Merge two sorted linked lists and return it as a new list. The new l ...

  7. 基于Goolgle最新NavigationDrawer实现全屏水平平移

    常见实现App 上面侧边栏菜单之前使用SlidingMenu,现在发现Goolgle原生NavigationDrawer也挺好用.但是细心的开发者们发现NavigationDrawer没有类似Slid ...

  8. Page Cache(页缓存)

    Page Cache 由内存中的物理page组成,其内容对应磁盘上的block. page cache的大小是动态变化的. backing store: cache缓存的存储设备 一个page通常包含 ...

  9. JavaWeb之过滤器

    过滤器 什么是过滤器 1示意图: 过滤器的作用: 1.过滤器的作用好比一个保安.是servlet规范中的技术 2.用户在访问应用的资源之前或者之后,可以对请求做出一定的处理 编写过滤器步骤: 1.编写 ...

  10. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：设置浮动和偏移

    <!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...