前面看到的表单控件都正常的大小。可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名,用来控制表单控件的高度。这两个类名是:

  1. input-sm:让控件比正常大小更小

  2. input-lg:让控件比正常大小更大

  这两个类适用于表单中的input,textarea和select控件

<h1>案例1</h1>
<form role="form">
<div class="form-group">
<label class="control-label">控件变大</label>
<input class="form-control input-lg" type="text" placeholder="添加.input-lg,控件变大">
</div>
<div class="form-group">
<label class="control-label">正常大小</label>
<input class="form-control" type="text" placeholder="正常大小">
</div>
<div class="form-group">
<label class="control-label">控件变小</label>
<input class="form-control input-sm" type="text" placeholder="添加.input-sm,控件变小">
</div>

Bootstrap系列 -- 18. 表单控件大小的更多相关文章

  1. Bootstrap系列 -- 14. 表单控件输入框input

    每一个表单都是由表单控件组成.离开了控件,表单就失去了意义.接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识. 单行输入框,常见的文本输入框,也就是input的type属性值为tex ...

  2. Bootstrap历练实例:表单控件大小

    表单控件大小 您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度. 实例: <!DOCTYPE html><html><hea ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单:表单控件大小

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. AnjularJS系列2 —— 表单控件功能相关指令

    第二篇,表单控件功能相关指令. ng-checked控制radio和checkbox的选中状态 ng-selected控制下拉框的选中状态 ng-disabled控制失效状态 ng-multiple控 ...

  5. bootstrap -- css -- 表单控件

    若干css样式 .form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14p ...

  6. Bootstrap的表单控件

    支持的表单控件 Bootstrap 支持最常见的表单控件,主要是 input.textarea.checkbox.radio 和 select. 输入框(Input) 最常见的表单文本字段是输入框 i ...

  7. Bootstrap_表单_表单控件

    一.输入框input 单行输入框,常见的文本输入框,也就是input的type属性值为text. 在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确 ...

  8. bootstrap 表单控件 控件状态 控件大小 help-block

    bootstrap 表单控件 控件状态 控件大小 help-block <!DOCTYPE html> <html lang="en"> <head& ...

  9. Bootstrap关于表单控件(按扭)

    按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现:   ☑  input[type=“submit”]   ☑  input[type=“button”]   ☑  input[type=“r ...

随机推荐

  1. RTB交接

    RTB产品测试进度 元数RTB产品 元数的产品已经测过两个版本,分别是1.1版本和1.2版本,目前线上跑的是1.2版本.程序线上情况目前正常,没有问题. 元数功能账号为:yuanshu  需用root ...

  2. MapReduce形象总结

    We want to count all to the books in the library.You count up shelf #1,I count up shelf #2. That's a ...

  3. Java中的流

    一.Java中流的原理 流是个抽象的概念,是对输入输出设备的抽象,Java程序中,对于数据的输入/输出操作都是以“流”的方式进行.设备可以是文件,网络,内存等. 四种基本流InputStream,Ou ...

  4. HDU 1251 统计难题

    字典树又一基本题 代码: #include <iostream> #include <cstdio> #include <cstring> #include < ...

  5. QC学习二:QC使用中问题点汇总

    QC 使用中问题点汇总,包括以下方面: 1.不兼容IE7,IE8的问题(服务器端设置) 2.无法在Win 7下正常下载页面(客户端设置) 3.在QC中填写中文内容后无法正常提交到数据库(客户端设置) ...

  6. linux上的常见命令掌握

    http://coolshell.cn/articles/8883.html 这篇文章来源于Quroa的一个问答<What are some time-saving tips that ever ...

  7. Java基础详解 (一)Java的类成员访问权限修饰词(以及类访问权限)

    在一个类的内部,其成员(包括成员变量和成员函数)能否被其他类所访问,取决于该成员的修饰词.Java的类成员访问权限修饰词有四类:private,无(默认情况下),protected和public.其权 ...

  8. 浅谈CLR

    1.什么是CLR CLR(Common Language Runtime)公共语言远行时,是一个可由多种编程语言使用的“远行时”.CLR的核心功能(比如内存管理.程序集加载.安全性.异常处理和线程同步 ...

  9. 关于Yii2中count方法的使用

    统计文章与分类中间表中c_id的数目,也就是category表中total字段的值 原生SQL语句:select count(c_id) from article_category where c_i ...

  10. Ember模板中的操作指向

    模板中的链接操作指向有三个地方,该模板对应的控制器和路由以及视图,默认是先跳转到控制器,如果控制器里没有定义模板中动作的方法,就去该模板对应的路由里找,如果还没找到,就去父级路由找,直到顶级路由,如果 ...