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

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

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

  这两个类适用于表单中的inputtextareaselect控件

<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. 烂泥:NFS存储与VSphere配合使用

    本文首发于烂泥行天下. 公司服务器的虚拟化使用的是VM ESXi 5.0,为了更有效的利用服务器的硬盘空间.就把所有的镜像文件存放到另外一台linux服务器上,这样在使用vsphere安装虚拟机时可以 ...

  2. 记一次Web应用CPU偏高

    LZ开发的一个公司内部应用供查询HIVE数据使用.部署上线后总是会出现CPU偏高的情况,而且本地测试很难重现.之前出现几次都是通过直接重启后继续使用,因为是内部使用,重启一下也没有很大影响(当然,每次 ...

  3. FQ 也要使用 Telegram

    不知怎么回事,一款优秀的开源,跨平台,安全的即时通讯工具 Telegram 就被 GG 了. 但是我们还得继续使用--那就 FQ 吧.用 ShadowSocks FQ 还不错. 安装 ShadowSo ...

  4. USACO section1.2 Transformation

    /* ID: vincent63 LANG: C TASK: transform */ #include <stdio.h> #include<stdlib.h> #inclu ...

  5. selenium使用等待的几种方式

    1.使用java的sleep try { Thread.sleep(3000); } catch (InterruptedException e) { // TODO Auto-generated c ...

  6. np问题

    NP(np) Time Limit:1000ms Memory Limit:64MB 题目描述 LYK 喜欢研究一些比较困难的问题,比如 np 问题.这次它又遇到一个棘手的 np 问题.问题是这个样子 ...

  7. 十个Flex/Air疑难杂症及解决方案简略

    十个Flex/Air疑难杂症及解决方案简略 转自http://blog.sban.us/40.html 最近去一家台企,对方给我出了十道“难道”:在TileList中如果選擇檔過多,會出現捲軸,當拖動 ...

  8. 只有 DBA 才能导入由其他 DBA 导出的文件

    两句话搞定问题: grant dba to testuser ; 如果还不行,再执行: alter user  testuser default role DBA:

  9. css3高级运动keyframes

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. js对象深潜拷贝(从requirejs中抠出来的)

    var op = Object.prototype, ostring = op.toString, hasOwn = op.hasOwnProperty; function isFunction(it ...