<!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-inline" role="form">

            <div class="form-group">

                <label class="sr-only" for="name">名称</label>

                <input type="text" class="form-control" id="name"

                       placeholder="请输入名称">

            </div>

            <div class="form-group">

                <label class="sr-only" for="inputfile">文件输入</label>

                <input type="file" id="inputfile">

            </div>

            <div class="checkbox">

                <label>

                    <input type="checkbox"> 请打勾

                </label>

            </div>

            <button type="submit" class="btn btn-default">提交</button>

        </form>

    </body>

</html>

吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：内联表单的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：复选框（Checkbox）和单选框（Radio）

    <!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 表单：表单控件状态

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：水平表单

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. html5异步单图片多图片上传两种实现方式 后台.net mvc接收

    Asp.net mvc上传多张图片后台存储 前台页面通过<file name="img">标签数组上传图片,后台根据Request.Files["img&qu ...

  2. 洛谷 P1043 数字游戏（区间dp）

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

  3. python学习HTML之CSS

    1.sytle属性设置 . <head> <meta charset="UTF-8"> <title>Title</title> & ...

  4. ASA设置某些log不发送到log server

    If you want to suppress a specific syslog message to be sent to syslog server, then you must enter t ...

  5. Nexus-产品认识

    传统的思科数据中心网络架构也包括如下层级结构:    • 核心层(一般是Nexus 7K来充当)    • 汇聚层(一般也是Nexus 7K充当,可能存在2台,或4台的设备)    • 接入层(一般会 ...

  6. 关于java继承条件下的构造方法调用

    首先是测试代码: class Grandparent { public Grandparent() { System.out.println("GrandParent Created.&qu ...

  7. 「JSOI2011」棒棒糖

    「JSOI2011」棒棒糖 传送门 双倍经验 考虑主席树做法. 对于当前的主席树节点,如果 \(\le mid\) 的个数足够就往左边走,否则就尝试往右边走,都不行就返回 \(0\). 参考代码: # ...

  8. 二叉树（3）AVL 树

    封装基于 BinaryTreeOperations 的 AVL 树(一种自平衡的二叉查找树). 除了提供 BinaryTreeOperations 中的部分基础接口外,增加按键的插入 和 按键或节点指 ...

  9. Vulnhub_DC1 记录

    目录 Vulnhub_DC1 记录 经验 & 总结 步骤流水 1. 建立立足点 2. 提权 3. 主机信息搜集 4. 继续提权 5. 消失的flag Vulnhub_DC1 记录 参考walk ...

  10. app生命周期之即将关闭

    需求:当软件正在进行任务还未结束时,如果用户强制退出软件,需要将一些数据进行保存等处理. 策略:当用户使用多任务将软件挂起,并滑掉软件时,接下来有5妙钟的时间留给软件做处理.会调用- (void)ap ...