<!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甲级】1096 Consecutive Factors (20 分)

    题意: 输入一个int范围内的正整数,输出它最多可以被分解为多少个连续的因子并输出这些因子以*连接. trick: 测试点5包含N本身是一个素数的数据,此时应当输出1并把N输出. 测试点5包含一个2e ...

  2. C语言：对长度为7的字符串，除首尾字符外，将其余5个字符按ASCII降序排序。-计算并输出3~n之间所有素数的平方根之和。

    //对长度为7的字符串,除首尾字符外,将其余5个字符按ASCII降序排序. #include <stdio.h> #include <ctype.h> #include < ...

  3. rapidxml编写xml文件（一）

    int writeXML(void) { rapidxml::xml_document<> doc; rapidxml::xml_node<> *rot = doc.alloc ...

  4. idea垂直分屏

    1.找到分屏功能 搜索keymap(注意大小写): 2.Split Vertically 垂直分屏/Split Horizontally 水平分屏 3.添加快捷方式

  5. 学习JavaScript数据结构与算法---前端进阶系列

    学习建议 1.视频学习---认知 建议:在中国慕课上找"数据结构"相关的视频教程.中国大学MOOC 推荐清华大学.北京大学.浙江大学的教程,可先试看,然后根据自身的情况选择视频进行 ...

  6. 2019牛客暑期多校训练营（第七场）A String （字符串的最小表示）

    思路 这题思路如果是递归的话,应该是比较正确的.但是实际上只用切割两次就可以了. 先把原串从后向前切割一次,再把每一部分切割一次. 切两次的思路实际上是有漏洞的. 递归的思路,终点是,如果串长为1,或 ...

  7. Python结合Pywinauto 进行 Windows UI 自动化

    转:Python结合Pywinauto 进行 Windows UI 自动化 https://blog.csdn.net/z_johnny/article/details/52778064 说明:Pyw ...

  8. ANSYS初始残余应力赋值

    目录 1.建模 2.划分网格并分组 3.所有节点固定约束 4.施加初始残余应力 5.结果 1.建模 建立有限元模型,采用SOLID185单元,模型尺寸0.050.050.02 材料为钢 !程序头 FI ...

  9. 2016-2017学年第三次测试赛 问题 F: 签到题

    问题 F: 签到题 时间限制: 1 Sec  内存限制: 128 MB提交: 80  解决: 28 提交统计讨论版 题目描述 在计算机网络考试中, 黑帅男神看到一个将IP网络分类的题, 精通C++的他 ...

  10. leetcode 0206

    目录 ✅ 292. Nim 游戏 ✅ 933. 最近的请求次数 ✅ 942. 增减字符串匹配 仍旧有需要思考的地方 py尝试 ✅ 977. 有序数组的平方 ✅ 292. Nim 游戏 https:// ...