<!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. SpringBoot+MyBatis+PageHelper分页无效

    POM.XML中的配置如下:<!-- 分页插件 --><!-- https://mvnrepository.com/artifact/com.github.pagehelper/pa ...

  2. 吴裕雄 python 神经网络——TensorFlow 花瓣分类与迁移学习（1）

    import glob import os.path import numpy as np import tensorflow as tf from tensorflow.python.platfor ...

  3. WLC-Right to Use Licensing

    1.RTU的介绍 RTU licensing是没有和UDI(unique device identifier)或SN绑定的一种模型.在你接受了最终用户许可协议(EULA)后,使用RTU license ...

  4. C++11特性中的to_string

    写在最前面,本文摘录于柳神笔记 to_string 的头⽂件是 #include , to_string 最常⽤的就是把⼀个 int 型变量或者⼀个数字转化 为 string 类型的变量,当然也可以转 ...

  5. iOS 根据域名查询 IP 地址

    在 iOS 开发中,如果需要知道网站的 IP 地址: #include <netdb.h> #include <arpa/inet.h> NSString *webSiteSt ...

  6. rem布局，在用户调整手机字体大小/用户调整浏览器字体大小后，布局错乱问题

    一.用户调整浏览器字体大小,影响的是从浏览器打开的web页. 浏览器设置字体大小,影响浏览器打开的页面.通过js可控制用户修改字体大小,使页面不受影响. (function(doc, win) { / ...

  7. leetCode练题——13. Roman to Integer

    1.题目13. Roman to Integer Roman numerals are represented by seven different symbols: I, V, X, L, C, D ...

  8. 「NOI2009」植物大战僵尸

    「NOI2009」植物大战僵尸 传送门 这是一道经典的最大权闭合子图问题,可以用最小割解决(不会的可以先自学一下) 具体来说,对于这道题,我们对于两个位置的植物 \(i\) 和 \(j\) ,如果 \ ...

  9. win8.1 virtualbox 安装centos7注意事项

    win8.1是64位的,一开始在virtualbox中选择版本时,怎么也选不到64位的,这时要改BIOS设置,把CPU虚拟化改为允许. virtualbox是32位的,没必要非得是64位(64位的也不 ...

  10. Vue系列(六)之常用指令v-model

    v-model 基本使用 修饰符 .trim .number .lazy 前面讲到的插值,其实都是单向绑定,数据变-->视图变.有些元素可以与用户交互,比如input,select等,那么我们希 ...