<!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. idea抽取方法

    问题:有时候一个方法里面嵌套了很多逻辑,想拆分为多个方法方便调用:或者一个方法复用性很高,这时,这个方法嵌套在局部方法里面肯定是不方便的,如何快速抽取出这个方法? public class Demo ...

  2. 理解CART决策树

    CART算法 原理 CART全称为Classification and Regression Tree. 回归树 相比ID3,CART遍历所有的特征和特征值,然后使用二元切分法划分数据子集,也就是每个 ...

  3. mysql数据库数据备份还原

    1.直接在命令行里面执行 备份一个数据库:mysqldump -h server -u username -p password db_name > database-sqlbkp_`date ...

  4. Hibernate学习过程出现的问题

    1  核心配置文件hibernate.cfg.xml添加了约束但是无法自动获取属性值 解决方案:手动将DTD文件导入 步骤:倒开Eclipse,找到[window]->[preference]- ...

  5. VUE父子组件相互传值

    passer.vue中代码 首先在文件中引入组件 import canvasDraw from '@/components/CanvasDraw/canvasDraw' 局部注册组件:componen ...

  6. Jquery 事件 文本框常用

    1.只许输入类型 //只能输入整数和小数 function txtKeyUpDecimal(txtName) { getID(txtName).keyup(function(){ //keyup事件处 ...

  7. html5 postMessage 消息传递问题

    <script type="text/javascript"> $.fn.extend({ addEvent: function (type, handle, bool ...

  8. 【摘录自MDN】预定义函数

    JavaScript语言有好些个顶级的内建函数: eval() eval()方法会对一串字符串形式的JavaScript代码字符求值. uneval()  uneval()方法创建的一个Object的 ...

  9. Linux进程内消息总线设计

    文章目录 Windows平台进程内消息总线 如果没有消息总线,会产生什么问题 死循环包含关系 高耦合.低内聚 消息总线 结构图 原理 生产者与总线的关系 总线与消费者的关系 Linux进程内消息总线设 ...

  10. C# Stream篇（三） -- TextWriter 和 StreamWriter---转载

    C# Stream篇(三) -- TextWriter 和 StreamWriter TextWriter 和 StreamWriter 目录: 为何介绍TextWriter? TextWriter的 ...