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 ...
随机推荐
- css div平移淡入淡出
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; backg ...
- windows 系统 GitBook生成PDF、epub报错Error during ebook generation: 'ebook-convert' 乱码
解决方法 1. 根据你的系统下载calibre并安装 2. 右键属性打开桌面图标位置 3 .复制该路径: 4. 打开我的电脑-属性-系统-高级系统设置-环境变量,配置环境. 5. 编辑"PA ...
- perl 操作文件指针
之前使用perl 脚本写了一个读取文件的小工具,但是由于当时使用的Tie 的方式,在处理大文件时,效率并不十分理想,所以在网上搜索了perl 如何操作文件指针的文章,自己也学习一下,本博客就是学习过程 ...
- 计算机网络自顶向下方法第2章-应用层(application-layer).1
2.1 应用层协议原理 2.1.1网络应用程序体系结构 1)在客户-服务器体系结构 (client-server architecture)中,有一个总是打开的主机称为服务器,它服务于来自许多其他称为 ...
- kali 装好java后提示 -bash: /home/javainstall/jdk1.8.0_171/bin/java: 没有那个文件或目录
[问题现象] 在/etc/profile配置里面也是配置好了的,并且该目录是有java的 [问题原因] 出现这个问题的原因:64位的系统,安装了32位的Java. [解决方案] 通过网络搜索,发现通过 ...
- C 语言实例 - 字符串翻转
C 语言实例 - 字符串翻转 C 语言实例 C 语言实例 使用递归来翻转字符串. 实例 - 字符串翻转 #include <stdio.h> void reverseSentence(); ...
- react native设置容器阴影
shadowColor:'#eee',shadowOffset:{h:10,w:10},shadowRadius:3,shadowOpacity:0.8,
- Linux | C代码的编写、运行和调试
1. 建立.c文件 在终端下输入:vi mytest.c [使用编辑器 vim] 键入键盘i键,使vi编辑器进入编辑模式 接下来在vi编译器中编写代码,如: #include <stdio.h ...
- 洛谷 P2623 物品选取
https://www.luogu.org/problemnew/show/P2623 https://www.luogu.org/blog/test-1/solution-p2623 重点就是甲类物 ...
- SecureCRT无法连接虚拟机Linux—虚拟网卡（NAT方式）IP（169.254.xx.xx）无效问题
搞了一晚上,终于解决了http://blog.csdn.net/zengxianyang/article/details/50394809