Bootstrap历练实例：表单控件大小
表单控件大小
您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。
实例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：表单控件大小</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<form class="form-horizontal" role="form">
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder=".input-lg" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="默认输入"/>
</div>
<div class="form-group">
<input type="text" class="form-control input-sm" />
</div>
<div class="form-group"></div>
<div class="form-group">
<select class="form-control input-lg">
<option>.input-lg</option>
</select>
</div>
<div class="form-group">
<select class="form-control">
<option>默认大小</option>
</select>
</div>
<div class="form-group">
<select class="form-control input-sm">
<option>.input-sm</option>
</select>
</div>
<div class="form-group">
<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>
</div>
</form>
</div>
<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap历练实例：表单控件大小的更多相关文章
- Bootstrap系列 -- 18. 表单控件大小
前面看到的表单控件都正常的大小.可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置.不过Bootstrap框架还提供了两个不同的类名, ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：表单控件大小
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Bootstrap系列 -- 14. 表单控件输入框input
每一个表单都是由表单控件组成.离开了控件,表单就失去了意义.接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识. 单行输入框,常见的文本输入框,也就是input的type属性值为tex ...
- Bootstrap的表单控件
支持的表单控件 Bootstrap 支持最常见的表单控件,主要是 input.textarea.checkbox.radio 和 select. 输入框(Input) 最常见的表单文本字段是输入框 i ...
- bootstrap -- css -- 表单控件
若干css样式 .form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14p ...
- Bootstrap_表单_表单控件
一.输入框input 单行输入框,常见的文本输入框,也就是input的type属性值为text. 在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确 ...
- bootstrap 表单控件 控件状态 控件大小 help-block
bootstrap 表单控件 控件状态 控件大小 help-block <!DOCTYPE html> <html lang="en"> <head& ...
- Bootstrap关于表单控件（按扭）
按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现: ☑ input[type=“submit”] ☑ input[type=“button”] ☑ input[type=“r ...
- Bootstrap关于表单控件（Radio,CheckBox）
表单控件(复选框checkbox和单选择按钮radio) Bootstrap框架中checkbox和radio有点特殊,Bootstrap针对他们做了一些特殊化处理,主要是checkbox和radio ...
随机推荐
- Codeforces 67A【模拟】
题意: 给一个字符串代表相邻学生的比较,L代表左边多,R表示右边多,=表示左右相等. 保证每个人拿糖>=1,在分糖最少的情况下,输出每个学生所分得的糖. 思路: 模拟一下,第一个人一开始拿1个, ...
- 洛谷P1919 【模板】A*B Problem升级版（FFT）
传送门 话说FFT该不会真的只能用来做这种板子吧…… 我们把两个数字的每一位都看作多项式的系数 然后这就是一个多项式乘法 上FFT就好了 然后去掉前导零 (然而连FFT的板子都背不来orz,而且空间又 ...
- Node.js 自定义模块
Node.js内置多个模块,也可以使用第三方模块,今天学习一下如何使用自己定义的模块 在同级目录下定义两个js文件 第一个:custom1.js "use strict"; fun ...
- 【UVA - 156 】Ananagrams （set,map,vector）
Ananagrams Descriptions: Most crossword puzzle fans are used to anagrams--groups of words with the ...
- 学习Mahout(二)
继续上一篇博客. 这篇博客介绍如何跑一下mahout自带的Hello world程序 我将mahout 安装在/opt/hadoop/mahout-distribution-0.9 cd /opt/h ...
- 企业级应用，如何实现服务化二（dubbo架构）
这是企业级应用,如何实现服务化系列的第二篇.在上一篇:企业级应用,如何实现服务化一(项目架构演化)中,交代了企业级应用架构的演化过程,和服务治理的方案可以选择:dubbo,或者spring cloud ...
- java关于方法参数传递的相关问题讨论
我们知道,java中定义变量的目的有两个: 1.防止被垃圾回收机制回收,毕竟如果没有明确指向真实物理内存的'代号'很大可能会被java垃圾回收机制当作垃圾回收. 2.便于引用,方便处理. packag ...
- 083 Remove Duplicates from Sorted List 有序链表中删除重复的结点
给定一个排序链表,删除所有重复的元素使得每个元素只留下一个.案例:给定 1->1->2,返回 1->2给定 1->1->2->3->3,返回 1->2- ...
- avalon使用体验
最近在用avalon做项目,使用的感受是,它确实会比angualr学习成本更低,我不需要花很多时间去了解它的功能,没有指令.没有服务,花一个晚上看看API就差不多能着手用了.avalon的视图它提供了 ...
- Spark无法创建新线程
Spark提交程序报错,无法创建新的线程 原因是因为这台公用机器上跑的进程太多了,需要修改Linux参数,允许用户最大进程数 查看允许用户最大进程数配置 ulimit -a 修改允许用户最大进程数配置 ...