表单控件大小

您可以分别使用 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历练实例：表单控件大小的更多相关文章

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

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

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：表单控件大小

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

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

    每一个表单都是由表单控件组成.离开了控件,表单就失去了意义.接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识. 单行输入框,常见的文本输入框,也就是input的type属性值为tex ...

  4. Bootstrap的表单控件

    支持的表单控件 Bootstrap 支持最常见的表单控件,主要是 input.textarea.checkbox.radio 和 select. 输入框(Input) 最常见的表单文本字段是输入框 i ...

  5. bootstrap -- css -- 表单控件

    若干css样式 .form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14p ...

  6. Bootstrap_表单_表单控件

    一.输入框input 单行输入框,常见的文本输入框,也就是input的type属性值为text. 在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确 ...

  7. bootstrap 表单控件 控件状态 控件大小 help-block

    bootstrap 表单控件 控件状态 控件大小 help-block <!DOCTYPE html> <html lang="en"> <head& ...

  8. Bootstrap关于表单控件（按扭）

    按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现:   ☑  input[type=“submit”]   ☑  input[type=“button”]   ☑  input[type=“r ...

  9. Bootstrap关于表单控件（Radio,CheckBox）

    表单控件(复选框checkbox和单选择按钮radio) Bootstrap框架中checkbox和radio有点特殊,Bootstrap针对他们做了一些特殊化处理,主要是checkbox和radio ...

随机推荐

  1. 51nodcontest#24 A(xjb)

    題目鏈接:http://www.51nod.com/contest/problem.html#!problemId=1804 題意:中文題誒~ 思路: 三角形個數爲n-1, a, b數組元素個數也爲n ...

  2. Metasploit工具的使用

    如果有代理在前面加proxychains msfconsole 进入MSF终端search xxx xxx为要搜索的模块use xxxx 选择要用的攻击模块show options 查看相关设置set ...

  3. sed 删除指定行

    参考:http://blog.sina.com.cn/s/blog_4ba5b45e0102e7l2.html

  4. JSP技术概念

  5. SQL COUNT DISTINCT 函数

    定义和用法 可以一同使用 DISTINCT 和 COUNT 关键词,来计算非重复结果的数目. 语法 SELECT COUNT(DISTINCT column(s)) FROM table 例子 注意: ...

  6. python-函数进阶-动态传参,名称空间,作用域的问题

    一.函数的动态的动态参数 动态参数分为两种:动态接收位置参数.动态接收关键字参数. 1.*args  位置参数动态传参 # 顺序: 位置参数=>*args(arguments) => 默认 ...

  7. SpringMVC-高级参数绑定

    绑定数组 需求 在商品列表页面选中多个商品,然后删除. 需求分析 此功能要求商品列表页面中的每个商品前有一个checkbook,选中多个商品后点击删除按钮把商品id传递给Controller,根据商品 ...

  8. 552 Student Attendance Record II 学生出勤记录 II

    给定一个正整数 n,返回长度为 n 的所有可被视为可奖励的出勤记录的数量. 答案可能非常大,你只需返回结果mod 109 + 7的值.学生出勤记录是只包含以下三个字符的字符串:    1.'A' : ...

  9. 调用submit()方式提交表单

    今天在看高级程序设计时看到的这样一段话: 在以调用submit()方法的形式提交表单时,不会触发submit事件 写了一个小例子做了下测试,的确如此: <form id="fm&quo ...

  10. “玲珑杯”ACM比赛 Round #4 E -- array DP

    http://www.ifrog.cc/acm/problem/1050?contest=1006&no=4 DP[val]表示以val这个值结尾的等差数列有多少个 DP[val] += DP ...