BootStrap表单

- 垂直或基本表单

向父form添加role=“form”
将标签和控件放在class=form-group的

中，作用：获取最佳间距所需。
向所有文本元素、、添加class=“form-control”

<form role="form">
	<div  class="form-group">
		<label >名称</label>
		<input type="text" class="form-control" id="name" placeholder="请输入名称">
	</div>
</form>

- 内联表单
向左并齐，标签并排，向form中添加class=“form-inline”

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="name">名称</label>
    <input type="text" class="form-control" id="name" placeholder="请输入名称">
  </div>
</form>

可以通过为 label 设置 .sr-only 类将其隐藏
- 水平表单
form添加class=“form-horizontal”
lable添加class=“control-label”

<form role="form" class="form-horizontal">
	<div  class="form-group">
		<label  class="col-sm-2  control-label">名称</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="name" placeholder="请输入名称">
		</div>
	</div>
	<div class="form-group">
	    <div class="col-sm-offset-2 col-sm-10">
	      <button type="submit" class="btn btn-default">登录</button>
	    </div>
	  </div>
</form>

- 表单控件大小
class=“input-lg”（或input-sm）控制表单高度
class=“col-lg-number”(或col-sm-n)控制表单宽度
class="col-sm-offset-n”控制间隔
bootstrap网格系统列数量和为12

	超小设备手机（<768px）	小型设备电脑（>=768px）	中型设备电脑（>=992px）	大型设备电脑（>=1200px）
class前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列数量和	12	12	12	12
class前缀	auto	60px	78px	95px
间隙宽度	30px(一个列两边每边分别为15px)	30px	30px	30px
偏移列	不支持	.col-sm-offset-*	.col-md-offset-*	.col-lg-offset-*

把一个列的左外边距margin增加*列，范围是1-11

列排序：.col-md-push-* 向右偏移
.col-md-pull-*向左偏移
*范围1-11