<!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. Java补强转

    /* 对于byte/short/char三种类型来说,如果右侧赋值的数值没有超过范围, 那么javac编译器将会自动隐含地为我们补上一个(byte)(short)(char). 1. 如果没有超过左侧 ...

  2. 拥抱高通的联想，真的能靠5G突围？

    编辑 | 于斌 出品 | 于见(mpyujian) 2016年,对于常年自我标榜为"民族企业"的联想来说是品牌口碑的"转折之年".它在这一年的5G信道编码标准方 ...

  3. nginx介绍以及nginx的反向代理

    什么是nginx? Nginx 是一个高性能的轻量级的HTTP和反向代理服务器,也是一个邮件服务器. 下载地址 本人使用的是Tengine,它是由淘宝网发起的Web服务器项目.它在Nginx的基础上, ...

  4. php的分层思想

  5. 计算机二级-C语言-程序填空题-190117记录-对文件的处理，复制两个文件，往新文件中写入数据。

    //给定程序的功能是,调用函数fun将指定源文件中的内容赋值到指定目标文件中,复制成功时函数返回1,失败时返回0,把复制的内容输出到终端屏幕.主函数中源文件名放在变量sfname中,目标文件名放在变量 ...

  6. JS-正则表达式常规运用

    限制文本框只能输入0和正数 <input type="text" onkeyup="this.value=this.value.replace(/\D/g,'')& ...

  7. ASP.NET Core搭建多层网站架构【3-xUnit单元测试之简单方法测试】

    2020/01/28, ASP.NET Core 3.1, VS2019, xUnit 2.4.0 摘要:基于ASP.NET Core 3.1 WebApi搭建后端多层网站架构[3-xUnit单元测试 ...

  8. C++ STL之集合set的使⽤

    写在最前面,本文摘录于柳生笔记: set是集合,一个set里面个元素各不相同的,而且set会按照元素从小到大的进行排序,一下是set的常用方法:

  9. SpringMvc 项目配置

    spring-mvc.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=&quo ...

  10. 三年以上php开发经验常见面试题

    01 一般有三年以上php开发经验去百度.腾讯面试,常会接触的面试题小总结一下: 02 0.简单做一下自我介绍,?  然后谈一下近三年来你的得意之作? 03 1.面试官看过你的简历,会问一些你做的项目 ...