表单控件

文本域：与原始文本域使用方式相同，可以通过rows定义高度，设置cols定义宽度。但如果在文本域中添加了“form-control类”文本宽度为100%或auto，无需设置宽度。

复选框（checkbox）和单选按钮（radio）：checkbox和radio外面套上label标签后再套一层类名为.checkbox(.radio)的div。该div用于处理复选框单选框与标签的对齐方式。

复选框（checkbox）和单选按钮（radio）水平排列：如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”。如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”(在水平排列的情况下不必再添加.checkbox（.radio）类，因为水平排列的类名中已经包含了处理选框与label对齐的样式，两者之间重复添加会产生冲突)

表单控件状态(焦点状态)：焦点状态是通过伪类“:focus”来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式，重新添加阴影效果。要让控件在焦点状态下有上面样式效果，需要给控件添加类名“form-control”

表单控件状态(禁用状态)：Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的，在相应的表单控件上添加属性“disabled”

<input type="text" class=“form-control” placeholder="表单已禁用，不能输入" disabled></input>

向父元素添加role="form"。

把标签和控件放在一个带有 class.form-group的<div>中。这是获取最佳间距所必需的。

向所有的文本元素<input>,<textarea>,<select>添加class.form-control。

表单控件状态(验证状态)：在制作表单时，不免要做表单验证。同样也需要提供验证状态样式，在Bootstrap框架中同样提供这几种效果。

1、.has-warning:警告状态（黄色）

2、.has-error：错误状态（红色）

3、.has-success：成功状态（绿色）

使用的时候只需要在form-group容器上对应添加状态类名。

如果要让表单控件状态后面的icon小图标显示出来，只需要在对应的状态下添加类名“has-feedback”。请注意，此类名要与“has-error”、“has-warning”和“has-success”在一起。而且必须在表单中添加了一个 span 元素：

<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>

按钮：Bootstrap框架的按钮也是一个独立部分，我们同样在不同的版本之中能找到对应的代码：

LESS版本：查看源文件buttons.less；

Sass版本：查看源文件_buttons.scss；

已编译版本：查看源文件bootstrap.css文件第1992行～第2353行；

基础按钮：.btn;默认按钮：.btn .btn-default;主要按钮：.btn .btn-primary;成功按钮：.btn .btn-success

信息按钮：.btn .btn-info;警告按钮：.btn .btn-warning;危险按钮：.btn .btn-danger;链接按钮：.btn .btn-link。

多标签支持：div,input,span,a都支持.btn

不同按钮的风格

按钮大小控制

块状按钮：有时候在制作按钮的时候需要按钮宽度充满整个父容器（width:100%），特别是在移动端的制作中。那么前面的方法我们都无法很好的实现，除非重新定义按钮的宽度。其实在Bootstrap中并不需要这样做，Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满整个容器，并且这个按钮不会有任何的padding和margin值

按钮状态——禁用状态：在Bootstrap框架中，要禁用按钮有两种实现方式：

方法1：在标签中添加disabled属性

方法2：在元素标签中添加类名“disabled”

两者的主要区别是：

“.disabled”样式不会禁止按钮的默认行为，比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为，则需要通过JavaScript这样的语言来处理。对于标签也存在类似问题，如果通过类名“.disable”来禁用按钮，其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。

图片：

1、img-responsive：响应式图片，主要针对于响应式设计

2、img-rounded：圆角图片

3、img-circle：圆形图片

4、img-thumbnail：缩略图片

ICON：