<!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. Ansible自动化搭建及工具集和常见模块、命令详情(重点)

    一.ansible介绍 1.ansible简介 官方的title是“Ansible is Simple IT Automation”——简单的自动化IT工具. Ansible跟其他IT自动化技术的区别 ...

  2. 初学做uniapp项目过程梳理的一些记录

    1.uniapp不显示h5头部 第一种写法: { "path" : "pages/yunshi/yunshi", "style" : { & ...

  3. PyQt5窗口操作大全

    1.多窗口交互-使用信号与槽函数'''如果一个窗口和一个窗口交互,尽量不要访问窗口B的控件:应该访问与信号绑定的槽函数,从而降低窗口之间的耦合度 例:如果A直接访问B窗口的控件,一旦B窗口的控件发生改 ...

  4. Java面向对象编程 -1.6

    引用传递与垃圾产生分析 经过了一系列的分析之后已经确认,所有的引用传递的本质就是一场堆内存的调戏游戏.如果对于引用传递如果处理不当那么也会造成垃圾的产生, 那么本次将针对于垃圾产生的原因进行简单分析. ...

  5. C语言-数组与指针 字符与字符串

    1 字符与字符串:char c='a'而不能写出char c="a" //字符变量用单引号'',而字符串用双引号. 2 字符数组与字符指针的初始化: char s[10]={0}, ...

  6. Linux Mysql基础操作

    1). 打开MySQL 使用如下两条命令,打开MySQL服务并使用root用户登录: # 启动 MySQL 服务 sudo service mysql start # 使用 root 用户登录,实验楼 ...

  7. vue element 时间选择器设置禁用日期

    在 el-date-picker 组件中有一个 picker-options 属性 disabledDate 可以设置日期的可选范围 <el-date-picker v-model=" ...

  8. nginx访问目录是没加/的重定向控制

    static 模块提供了root与alias功能:发现目标是目录时:但URI末尾未加/时:会返回301重定向:重定向后会加/ 指令 Syntax: server_name_in_redirect on ...

  9. 汇编语言从入门到精通-2CPU资源和存储器

    CPU资源和存储器 在汇编语言中,需要访问的硬件资源主要有:CPU内部资源.存储器和I/O端口.本章将着重讲解CPU内部寄存器的命名.功能及其常见的用途,还要介绍存储器的分段管理模式.存储单元地址的表 ...

  10. idea 添加 阿里代码规范

    参考: https://blog.csdn.net/weixin_39220472/article/details/80077803