一、水平表单效果
在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：
1、在<form>元素上使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。
二、内联表单效果
有时候我们需要将表单的控件都在一行内显示，只需要在<form>元素上添加类名“form-inline”即可
三、select多行显示
<select class="multiple form-control"></select>
四、表单控件大小
.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
五、表单控件(复选框和单选按钮水平排列)
在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>
六、表单控件样式（焦点状态）
需要加上“form-control”,表单focus时才有bootstap样式：
1、宽度变成了100%
2、设置了一个浅灰色（#ccc）的边框
3、具有4px的圆角
4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化
5、设置了placeholder的颜色为#999
七、表单控件样式（禁用状态）
<input class="form-control input-lg" id="disabledInput" type="text" placeholder="表单已被禁用，不可输入" disabled>
八、表单控件样式（验证状态）
在制作表单时，不免要做表单验证。同样也需要提供验证状态样式，在Bootstrap框架中同样提供这几种效果。
1、.has-warning:警告状态（黄色）
2、.has-error：错误状态（红色）
3、.has-success：成功状态（绿色）
使用的时候只需要在form-group容器上对应添加状态类名。
<form role="form"> <div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess1">成功状态</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" > <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div> <div class="form-group has-warning has-feedback"> <label class="control-label" for="inputWarning1">警告状态</label> <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态"> <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> </div> <div class="form-group has-error has-feedback"> <label class="control-label" for="inputError1">错误状态</label> <input type="text" class="form-control" id="inputError1" placeholder="错误状态"> <span class="glyphicon glyphicon-remove form-control-feedback"></span> </div> </form>
.has-feedback可以在在表单验证的时候，不同的状态会提供不同的 icon，比如成功是一个对号（√），错误是一个叉号（×）等。
九、表单提示信息
class="help-block" 根据.has-success或者has-warning或者has-error来显示颜色
<form role="form"> <div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess1">成功状态</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" > <span class="help-block">你输入的信息是正确的</span> <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div> <div class="form-group has-warning has-feedback"> <label class="control-label" for="inputWarning1">警告状态</label> <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态"> <span class="help-block">请输入正确信息</span> <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> </div> <div class="form-group has-error has-feedback"> <label class="control-label" for="inputError1">错误状态</label> <input type="text" class="form-control" id="inputError1" placeholder="错误状态"> <span class="glyphicon glyphicon-remove form-control-feedback"></span> </div> </form>
十、按钮
<button class="btn" type="button">基础按钮.btn</button> <button class="btn btn-default" type="button">默认按钮.btn-default</button> <button class="btn btn-primary" type="button">主要按钮.btn-primary</button> <button class="btn btn-success" type="button">成功按钮.btn-success</button> <button class="btn btn-info" type="button">信息按钮.btn-info</button> <button class="btn btn-warning" type="button">警告按钮.btn-warning</button> <button class="btn btn-danger" type="button">危险按钮.btn-danger</button> <button class="btn btn-link" type="button">链接按钮.btn-link</button>
<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button> <button class="btn btn-primary" type="button">正常按钮</button> <button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button> <button class="btn btn-primary btn-xs" type="button">超小型按钮.btn-xs</button>
<button class="btn btn-default" type="button">button标签按钮</button> //主要用button标签和a标签 <input type="submit" class="btn btn-default" value="input标签按钮"/> <span class="btn btn-default">span标签按钮</span> <div class="btn btn-default">div标签按钮</div> <a class="btn btn-default">a标签按钮</a>
.btn-block 块状按钮。 按钮使用这个类名就可以让按钮充满整个容器，并且这个按钮不会有任何的padding和margin值。
<button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button> <button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button> <button class="btn btn-primary btn-sm btn-block" type="button">未禁用的按钮</button>
十一、图像
<div class="container"> <div class="row"> <div class="col-sm-4"> <img alt="140x140" src="http://placehold.it/140x140"> <div>默认图片</div> </div> <div class="col-sm-4"> <img class="img-rounded" alt="140x140" src="http://placehold.it/140x140"> <div>圆角图片</div> </div> <div class="col-sm-4"> <img class="img-circle" alt="140x140" src="http://placehold.it/140x140"> <div>圆形图片</div> </div> <div class="row"> <div class="col-sm-6"> <img class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140"> <div>缩略图</div> </div> <div class="col-sm-6"> <img class="img-responsive" alt="140x140" src="http://placehold.it/140x140" /> <div>响应式图片</div> </div> </div> </div> </div>
十二、图标
bootstrap提供了200个图标，都是以”glyphicon-”前缀的类名开始，然后后缀表示图标的名称。如：
<span class="glyphicon glyphicon-search"></span> <span class="glyphicon glyphicon-asterisk"></span> <span class="glyphicon glyphicon-plus"></span> <span class="glyphicon glyphicon-cloud"></span>
十三、代码样式
<code>放在中间的代码</code>