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 ...
随机推荐
- lightoj1066【BFS】
题意: 就是按照A->B->C->D....去拿,求步数: 思路: 有一个注意点:如果碰到合法字母吃掉,再以后的某次可以重新到改点: BFS的因为标记而减少了重复位置的到达,但是按照 ...
- 七大查找算法（Python）
查找算法 -- 简介 查找(Searching)就是根据给定的某个值,在查找表中确定一个其关键字等于给定值的数据元素. 查找表(Search Table):由同一类型的数据元素构成的集合 ...
- git clone 之后 ， 如何复制文件到文件夹 并 上传
1. 关于 _netrc machine github.com login myid password mypassword machine bitbucket.org login myid pass ...
- random 库
random 是使用随机数的python 标准库 ——为随机数:采用梅森旋转算法生成的(伪)随机序列中的元素 —— import random 基本随机数函数:seed(),random() 扩展随机 ...
- 最近工作用到压缩，写一个zip压缩工具类
package test; import java.io.BufferedOutputStream;import java.io.File;import java.io.FileInputStream ...
- 爬虫scrapy框架之CrawlSpider
爬虫scrapy框架之CrawlSpider 引入 提问:如果想要通过爬虫程序去爬取全站数据的话,有几种实现方法? 方法一:基于Scrapy框架中的Spider的递归爬取进行实现(Request模 ...
- python入门之流程控制
if else 格式: if 条件 command1 command2elif 条件: command3 command4 else: command3 command4 注意条件后和else后 ...
- 使用express+mongoDB搭建多人博客 学习（2）路由与模板
修改index.js路由规则: var express = require('express'); var router = express.Router(); /* GET home page. * ...
- shell脚本由基础变量及特殊变量（$@、$*、$#等）到实战。
一.shell脚本建立: shell脚本通常是在编辑器(如vi/vim)中编写,也可以在命令行中直接执行: 1.脚本开头: 规范的脚本第一行需要指出有哪个程序(解释器)来执行脚本中的内容,在L ...
- php设计模式学习之工厂模式
我的认为:所为工厂模式是事先有一系类class,一个工厂类' 工厂类根据不同的参数创建不同的对象,调用各自的方法; php利用工厂模式实现计算器: ?php /** * Created by PhpS ...