Bootstrap系列 -- 18. 表单控件大小

 

  前面看到的表单控件都正常的大小。可以通过设置控件的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> 

 

时间: 2024-09-17 06:25:07

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

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

  每一个表单都是由表单控件组成.离开了控件,表单就失去了意义.接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识. 单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type="?"](其中?号代表type类型,比如说text类型,对应的是input[type="text"

全面解析Bootstrap表单使用方法(表单控件)_javascript技巧

一.输入框input 单行输入框,常见的文本输入框,也就是input的type属性值为text. 在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type="?"] (其中?号代表type类型,比如说text类型,对应的是input[type="text"])的形式来定义样式的. 为了让控件在各种表单风格中样式不出错,需要添加类名".form-con

Bootstrap所支持的表单控件实例详解_javascript技巧

 Bootstrap所支持的表单控件如下所示: Bootstrap 支持最常见的表单控件,主要是 input.textarea.checkbox.radio 和 select. 输入框(Input) 最常见的表单文本字段是输入框 input.用户可以在其中输入大多数必要的表单数据.Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持,包括:text.password.datetime.datetime-local.date.month.time.week.number.

假乱真的表单控件:美化原生表单控件

文章描述:这样的模拟需要在兼顾实现设计的同时,还要保证网站的性能和可用性.这时我不禁开始怀念那些看起来平凡却非常实用的原生表单控件.如果用他们几乎可以解决以上所有问题. 在互联网成熟的今天,大家对网站的要求不仅仅在功能实现上,也开始注重视觉设计,多终端用户体验等等.表单控件是web页面上重要的组成元素,具有非常高的功能性.交互设计师为它设计更加方便的操作方式,视觉设计师也会绞尽脑汁设计出更加夺人眼球的视觉展现.可是由于表单控件自身的局限性,不能很好地自定义外表,所以就诞生了一系列的由聪明的前端同

为原生表单控件穿上美丽外衣

  Fufu :在互联网成熟的今天,大家对网站的要求不仅仅在功能实现上,也开始注重视觉设计,多终端用户体验等等.表单控件是web页面上重要的组成元素,具有非常高的功能性.交互设计师为它设计更加方便的操作方式,视觉设计师也会绞尽脑汁设计出更加夺人眼球的视觉展现.可是由于表单控件自身的局限性,不能很好地自定义外表,所以就诞生了一系列的由聪明的前端同学模拟出来的以假乱真的表单控件. 让我们从一个真实的"栗子"开始. 视觉设计师提供了一张设计稿: 作为前端同学,我在收到稿子的一瞬间,其实内心各

【分享】 纯 js 表单控件 —— 让 “增改查” 更轻松!

我们在做增删改查的时候,必可避免的要做表单,那么表单是怎么弄出来的呢?拖拽控件.手写.js创建还是第三方控件(包括js版)? 以前用服务器控件写了一套表单控件,用起来感觉也挺方便的,只是效率太低,太占用服务器的资源.想了好久也没想到如何提高效率,最后改成了纯js版的. js属于初学,代码还很简陋,大家见笑了.现在是越学习js,越是感到js的强大!   需求.目的:1. 在前台网页,使用js自动创建表单2. 可以控制表单里的控件类型,比如文本框.下拉列表框.在线编辑器等.3. 可以获取用户输入的数

【自然框架】之鼠标点功能现(二):表单控件的“应用”—— 代码?只写需要的!

    [自然框架]之鼠标点功能现(一):单表的增删改查(即上次5月23日活动的一个主题)[Demo.源码下载]           看了大家的回复,好像不少人误会了,我为了突出"鼠标点,功能现",所以没有说代码,没有贴代码,这就让一些人认为我想要完全抛弃VS,自己写一个"平台"来代替,不好意思,您高估我了,我可达不到.我只是想"简单的事情点鼠标就可以了,复杂的事情就要写代码了".         还是举例子吧.比如说上次里的[表8:添加列表信息

Step By Step 一步一步写网站[1] —— 帧间压缩,表单控件

记得在大学的时候,学习多媒体遇到了一个概念:帧内压缩和帧间压缩.我感觉我的第一篇里里面提到的我的那个方法有一点像帧间压缩,那么是不是把代码减少到极致了呢? 单看一个表的添加代码好像是,但是一个项目可不是只有一个添加的页面就完事了,项目越大,添加的页面也就越多,每个页面都写这么多的代码,依然很烦.那么怎么办呢? 许多人想到了代码生成器.是的,代码生成器可以减少我们的劳动,但是不能减少代码! 相反,由于使用了代码生成器,限制了我们的想象力,让我们居于现状,认为这么多的代码是正常的,是不可避免的,反正

ASP.NET中的XML表单控件

asp.net|xml|控件 导 读:介绍了有关ASP.NET中XML控件的使用,有个小BUG:在WEBFORM.ASPX中出现的XML控件,其中的transformsource属性设定了样式表文件路径,可是在文章出处没有找到这个XSL文件.:( 自己解决吧. --------------------------------------------------------------------------------在这个代码中揭示了微软在ASP.NET架构中隐藏的一个WEB表单控件,即<as