<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Bootstrap 实例 - 表单控件大小</title>

        <link rel="stylesheet" href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

        <script src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

        <script src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>

        <form role="form">

            <div class="form-group">

                <input class="form-control input-lg" type="text" placeholder=".input-lg">

            </div>

            <div class="form-group">

                <input class="form-control" type="text" placeholder="默认输入">

            </div>

            <div class="form-group">

                <input class="form-control input-sm" type="text" placeholder=".input-sm">

            </div>

            <div class="form-group">

            </div>

            <div class="form-group">

                <select class="form-control input-lg">

                    <option value="">.input-lg</option>

                </select>

            </div>

            <div class="form-group">

                <select class="form-control">

                    <option value="">默认选择</option>

                </select>

            </div>

            <div class="form-group">

                <select class="form-control input-sm">

                    <option value="">.input-sm</option>

                </select>

            </div>

            <div class="row">

                <div class="col-lg-2">

                    <input type="text" class="form-control" placeholder=".col-lg-2">

                </div>

                <div class="col-lg-3">

                    <input type="text" class="form-control" placeholder=".col-lg-3">

                </div>

                <div class="col-lg-4">

                    <input type="text" class="form-control" placeholder=".col-lg-4">

                </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甲级】1097 Deduplication on a Linked List (25 分)

    题意: 输入一个地址和一个正整数N(<=100000),接着输入N行每行包括一个五位数的地址和一个结点的值以及下一个结点的地址.输出除去具有相同绝对值的结点的链表以及被除去的链表(由被除去的结点 ...

  2. Java 枚举（enum）的学习

    Java 枚举(enum)的学习 本文转自:https://blog.csdn.net/javazejian/article/details/71333103 枚举的定义 在定义枚举类型时我们使用的关 ...

  3. mui下拉刷新 ios click事件无法响应问题

    使用mui的事件监听事件 tap mui("#pullrefresh").on('tap', '.ulDiv', function (event) {this.click();}) ...

  4. 《【架构设计之道】这一波优雅的操作，会把你的中间件系统架构带到另一个Level》阅读笔记

    (1)    Master-Slave架构 这个中间件系统的本质是希望能够用分布式的方式来处理一些数据,但是具体的作用涉及到核心技术,这里不能直接说明. 但是他的核心思想,就是把数据分发到很多台机器上 ...

  5. Plastic Bottle Manufacturer -Plastic Bottle Forming Process

    As a professional cosmetic bottle manufacturer, we know that plastic bottles are part of the rubber ...

  6. C：gcc的基本使用

    分布编译 预处理:gcc -E hello.c -o hello.i 编 译:gcc -S hello.i -o hello.s 汇 编:gcc -c hello.s -o hello.o 链 接:g ...

  7. kubernetes的Ingress资源介绍

    Ingress 的资源帮助信息介绍 [root@master ~]# kubectl explain ingress KIND: Ingress VERSION: extensions/v1beta1 ...

  8. node环境下：node_modules里面的文件

    node环境下:node_modules里面的文件 package.json来制定名单,需要哪些npm包来参与到项目中来,npm install命令根据这个配置文件增减来管理本地的安装包. depen ...

  9. windows和ubuntu安装以太坊客户端Mist

    Mist钱包下载地址:https://github.com/ethereum/mist/releases Mist = Ethereum Wallet + Web3 浏览器 Dapp:bancor 史 ...

  10. ConcurrentHashMap 实现缓存类

    参考:https://blog.csdn.net/woshilijiuyi/article/details/81335497 在规定时间内,使用 hashMap 实现一个缓存工具类,需要考虑一下几点 ...