<!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. Javascript中forEach的异步问题

    某天尝试了下在 forEach函数中调用 await Promise() 方法,如下: var arr = [1,2,3] arr.forEach(async (v,i,a)=>{ await ...

  2. min-25筛总结

    怕忘了赶快更一下.就是求积性函数前缀和的. 没有 \(\LaTeX\) 原理 现在你有一个积性函数 f(1)=1 FP(p) FPK(p,k) 首先要求的是前缀和,那就是f(质数)+f(合数)+f(1 ...

  3. 调用webservice服务(通过反射的方式动态调用)

    调用 ";//系统类别 var jkxlh = "";//接口序列号 var jkid = "68W05";//接口id string WriteXm ...

  4. 《Web安全攻防 渗透测试实战指南 》 学习笔记 （三）

    Web安全攻防 渗透测试实战指南   学习笔记 (三) burp suite详解                                                 是一款集成化渗透测试工 ...

  5. tkinter的listbox、radiobutton和checkbutton学习（2）

    1.tkinter的listbox 1.1 代码 #第1步,导出模块 import tkinter as tk #定义窗口,及其标题.大小和位置 win = tk.Tk() win.title('Li ...

  6. 给Linux系统运维新手的四点建议

    随着计算机的普及.互联网的发展,原本黑客手中的攻城利器---Linux,渐渐进入到普通群众的视线里,让越来越多的人接触到Linux,并学习Linux进而投身到Linux运维工作中去. 学习Linux的 ...

  7. nyoj 82

    题目:http://acm.nyist.edu.cn/JudgeOnline/problem.php?pid=82 2018-06-23 23:44:05 p.s.自己省错题了: 描述 一个叫ACM的 ...

  8. python集合操作方法详解

    前言 说集合之前,我们先说一个小例子,假设某公司有五个人喜欢打篮球,五个人喜欢打游戏,问即打游戏有打篮球的人都有哪些? play_basketball = ['a','b','c','d','e'] ...

  9. uniGUI之上传文件UniFileUploadButton(26)

    TUniFileUploadButton主要属性: Filter: 文件类型过滤,有图片image/*   audio/* video/*三种过滤 MaxAllowedSize: 设置文件最大上传尺寸 ...

  10. springboot devtool热部署的一个大坑

    spring.devtools.restart.poll-interval=3000ms spring.devtools.restart.quiet-period=2999ms 别问我为什么,问就是一 ...