标签：
水平表单效果
在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：
1、在<form>元素上使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。
内联表单效果
有时候我们需要将表单的控件都在一行内显示，只需要在<form>元素上添加类名“form-inline”即可
表单控件样式
需要加上“form-control”,表单focus时才有bootstap样式：
1、宽度变成了100%
2、设置了一个浅灰色（#ccc）的边框
3、具有4px的圆角
4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化
5、设置了placeholder的颜色为#999
select多行显示
<select class="multiple form-control"></select>
bootstrap表单控件大小
.input-lg 大
.input-sm 小
可用来控制<select><textarea><text>
<form role="form"> <div class="form-group"> <label class="control-label">控件变大</label> <input class="form-control input-lg" type="text" placeholder="添加.input-lg，控件变大"> </div> <div class="form-group"> <label class="control-label">正常大小</label> <input class="form-control" type="text" placeholder="正常大小"> </div> <div class="form-group"> <label class="control-label">控件变小</label> <input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件变小"> </div> </form>
form>form-group>form-control
表单按钮
默认样式 <button class="btn"></button>
primary：<button class="btn btn-primary"></button>
info: <button class="btn btn-info"></button>
success:<button class="btn btn-success"></button>
warning:<button class="btn btn-warning"></button>
danger:<button class="btn btn-danger"></button>
inverse:<button class="btn btn-inverse"></button> 个人感觉和默认样式差不多
在input的父级label加上类"checkbox-inline"或"radio-inline"
<label class="checkbox-inline">
<input type="checkbox" value="游戏"/>游戏
</label>
<label class="radio-inline"> <input type="radio" value="游戏"/>游戏
</label>
<form role="form"> <div class="form-group"> <label class="checkbox-inline"> <input type="checkbox" value="游戏"/>游戏 </label>
<label class="checkbox-inline">
<input type="checkbox" value="影视"/>影视
</label>
</div> </form>
<form role="form"> <div class="form-group"> <label class="radio-inline"> <input type="radio" value="option1" name="sex">男性 </label> <label class="radio-inline"> <input type="radio" value="option2" name="sex">女性 </label> <label class="radio-inline"> <input type="radio" value="option3" name="sex">中性 </label> </div> </form>
代码样式
<code>放在中间的代码</code>
标签：
原文地址：http://www.cnblogs.com/shanoon/p/5305030.html
