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 ...
随机推荐
- HihoCoder 1121二分图一•二分图判定
背景: 个名字,表示这两个人有一场相亲.由于姑姑年龄比较大了记性不是太好,加上相亲的人很多,所以姑姑一时也想不起来其中有些人的性别.因此她拜托我检查一下相亲表里面有没有错误的记录,即是否把两个同性安排 ...
- bzoj3427:[POI2013]BAJ-Bytecomputer
传送门 很显然有一个结论:最大不过1,最小不过-1 然后dp,设\(f[i][j]\)为满足前\(i\)个不下降,当前放的是\(j-2\),转移就比较好想了 具体方程看代码吧,终于有一个自己会写的题了 ...
- python连接redis数据库的两种方式
代码: # __author__ = 'STEVEN' import redis # 方式1,直接连接 # r = redis.Redis(host='192.168.43.22',port=6379 ...
- python多线程的实现
入门案例 import threading,time ''' #线程的创建有两种方式,.直接调用,.继承 ''' # def run(n): # print('test',n) # #.直接调用 # ...
- select查询---sql
SELECT 语句用于从数据库中选取数据. SQL SELECT 语句 SELECT 语句用于从数据库中选取数据. 结果被存储在一个结果表中,称为结果集. SQL SELECT 语法 SELECT c ...
- 如何解决netty发送消息截断问题
在netty开发过程中我遇到过长的消息被分割成多个小消息的问题.如下图所示: 其实这两条消息应该是一条消息,它们两个才是一个完整的json字符串.查看代码原来是客户端与服务器端都没有考虑TCP粘包 ...
- 1-24List三个子类的特点
List的三个子类的特点 因为三个类都实现了List接口,所以里面的方法都差不多,那这三个类都有什么特点呢? ArrayList: 底层数据结构是数组,查询快,增删慢. 线程不安全,效率高. Vect ...
- F. Bakkar In The Army 二分
http://codeforces.com/gym/100283/problem/F 思路是二分第几行,二分出来的行是总和 >= n的,那么第k - 1行一定要选,那么再在第k行中二分那一列. ...
- 移动端 Web 网页调试技巧
原文出处: 盛瀚钦 本文主要列举了调试本地网页.查看测试环境网页的各种方法,涵盖了PC.iPad.移动端的调试技巧. 本文的不足之处在于,小溪里暂时还没有找到调试位于微信中和安卓各国产浏览器上的网页. ...
- windows 服务器开设端口
主要用于服务器建设网站的时候开设端口 依次点击“开始”—“控制面板”—“windows防火墙” 2 先点击“打开或关闭windows防火墙”将windows防火墙打开 3 点击“高级设置” 4 设置入 ...