Bootstrap 表单

布局

Bootstrap 提供了三种类型的表单布局：垂直表单、内联表单、水平表单。

布局过程中常用的方法是将标签和空间放在一个div里面，并将div的类设置为form-group，设置之后控件和其标签可以作为一个整体进行操作。默认一个form-group组之后会切换到下一行。将标签用label包裹，之后将对应的控件的类设置为form-control。

默认的布局是垂直布局，即在不对form设置类的时候默认的布局。此时垂直方向上顺序排列，标签及控件一个一行排序，div之间的宽度略大一点，效果如下：

内联表单是指横向排布，将form的类设置为form-inline，这样内部的元素就会横向排列，但是需要先将内部的一些类去掉，因为form-group会自带一个回车，会影响具体效果，此外由于使用内联表单时，需要在表单控件上设置一个宽度。所以这种内联表单不常用。

水平表单应该算是最常见的了，先将表单的类设置为form-horizontal，在每个form-group里面，再将label的类设置为control-label。此时会出现很混乱的情况，采取的方法是将控件单独放在一个div里面，然后再利用之前的布局，将class设置为对应的长度，对于没有标签的情况，用offset进行调整。效果如图：

表单控件

Bootstrap支持对一些表单控件的美化

输入框：在声明类型之后，将类设置为form-control就可以完成设置。不设置的情况默认采用h5的输入框样式，对比效果如图：

文本框：应用方法同输入框，直接将textarea的类设置为form-control即可。

复选框和单选框：这两种控件区别不大，放在一起参考。由于其简单性，所以将控件和选项名放在一个label里面即可，bootstrap提供了内联和垂直两种排布方式，只需要将对应的label设置为checkbox-inline即可实现横向的排列，需要注意的是默认排布下每个label需要放在一个div中并且将class设置为checkbox/radio，而内联式则是直接排放label即可，效果如图：

选择框：将class设置为form-control即可实现，但是具体使用起来最好搭配前面的排列使用。

静态控件

需要在一个水平表单内的表单标签后放置纯文本时，在 p上使用 class .form-control-static。使用时搭配布局可以获得更好的效果。表现为在表单中显示出一段文字，样式和其余的控件一致。

表单控件状态

需要禁止操作某一个控件时，在标签内添加disabled属性即可。对fieldset设置disabled就会将整个fieldset内部的所有元素都禁止操作。此外Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。即通过修改form-group来修改点击时外围框和文字的颜色，进而表现出不同的提示效果。效果如图：

表单帮助文本

当需要在控件设置提示性标语时，可以用一个span，将类设置为help-block，就会有颜色较细的一段文字，可以放在控件下方作为提示性文字。效果如图：