前面看到的表单控件都正常的大小。可以通过设置控件的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. 给Apache增加SSI支持(shtml的奥秘)

    什么是SSI? SSI是英文Server Side Includes的缩写,翻译成中文就是服务器端包含的意思.从技术角度上说,SSI就是在HTML文件中,可以通过注释行调用的命令或指针.SSI具有强大 ...

  2. {dockerUI}在服务器上直接安装shipyard/shipyard

    $ git clone https://github.com/shipyard/shipyard.git $ cd shipyard/   $ sudo pip install -r requirem ...

  3. 物理系统迁移虚拟化P2V技术

    企业搭建虚拟化平台之后的第一件事肯定是将现有的服务器应用业务转移到虚拟服务器上,这就是虚拟化整合服务器的第一步,也是虚拟化程序的基础功能之一:P2V的转化功能. AD:   企业搭建虚拟化平台之后的第 ...

  4. NoSql之旅--Cassandra安装篇(一)

    有点迷茫了,头脑中只想起来一句话,"那就去学习吧". 我负责的项目中有一部分用到了Cassandra,当时也看过点,但是并没有太深入的了解,既然"学习劲头"正足 ...

  5. log4j加载方式导致的bae和sae部署异常

    这2天改在bae上部署代码,为了便于程序的功能测试,引入了log4j日志,但是问题来了..测试程序采用的是spring3.2.8框架搭建,web.xml引入日志代码为: <context-par ...

  6. Rotate Array

    Rotate an array of n elements to the right by k steps. For example, with n = 7 and k = 3, the array  ...

  7. ETL from hadoop to vertica

    根据项目需要,我做了一个POC(proof of concept),XML TXT的数据从HADOOP 引入到VERTICA. 我采用的方案是pig,具体信息可以参加vertica官方的文档. Acc ...

  8. [转]Highcharts仪表盘制作

    http://www.runoob.com/highcharts/highcharts-guage-solid.html 本文转自:http://blog.csdn.net/javaliuzhiyue ...

  9. 【ASP.NET 进阶】根据IP地址进行百度地图定位

    昨天有完成一个[ASP.NET 进阶]根据IP返回对应位置信息 的小Demo,既然可以通过IP获得位置信息,那当然可以通过位置信息的经纬度获取IP的当前定位了,虽然与实际地址偏移较大,毕竟不是GPRS ...

  10. 如此低价的ZBrush,你能想象?

      作为3D艺术的狂热者,你是否曾为找不到一款适合自己的雕刻软件而苦恼?要么,你已经找到了,却因为昂贵的价格而迟迟不肯入手? 作为改变整个三维行业的业界先进的数字雕刻和绘画软件,ZBrush向来拥有广 ...