BootStrap表单

基本实例

.form-control设置<input><textarea><select>标签宽度为100%。将label和<input><textarea><select>标签统一放在.form-group 中，以获得更好的排列。

表单基本结构<div class="form-group"><label></label><input class="form-control"/></div>。

表单内的灰色默认文字，用的是input的自带属性placeholder="用户名"。

checkbox或radio单独给了类.checkbox和.radio，基本结构为<div class="form-group"><div class="checkbox"><label></label><input class="form-control"/>Reading</div></div>。若让一组radio只能单选，这一组的input的name必须设置为一样的。

内联单选和多选

把form-group 下级div的类，改为checkbox-inline和radio-inline。

内联表单

给<form>标签加.form-inline，在内联表单中，表单能够实现在一行显示，form-control的with设置为auto。

若想给input表单增加头和尾，可以使用.input-group-addon，包含此类的标签需要放在.input-group中。

水平排列的表单

首先需要给form标签增加一个类：.form-horizontal，其基本结构为<div class="form-group"><label class="col-md-2 control-label"></label><div class="col-md-10"><input class="form-control" /></div></div>，form-group充当了row，所以就不用再添加row了。

静态控件

如果需要在表单中，将label和文本置为一行。文本可以添加.form-control-static，使文本和label对齐。

禁用状态

为表单添加属性disabled="disabled"，该input则被禁用。为表单添加属性readonly="readonly"，该input状态为只读。

被禁用的表单鼠标放在上面会显示禁用标识，只读的表单是支持点击的。若想对多个表单、按钮禁用，可以用 <fieldset  disabled="disabled"></fieldset>将多个表单、按钮包裹。IE11及以下的浏览器不支持fieldset。

校验状态

bootstrap对表单的校验状态，如error,success,warning都定义了样式，使用has-error,has-warning,has-success到表单的父元素，任何父标签包含的元素都接受校验状态。

添加额外图标

可以对检验状态对话框设置图标，为form-group标记的标签再添加has-feedback，并在对话框后面添加<span class="glyphicon glyphicon-ok form-control-feedback"></span>

控件大小

通过input-lg，input-sm控制对话框的大小

表单组的大小

form-group-lg，form-group-sm可以控制form-horizontal包裹的label元素的表单的大小。对于未使用form-horizontal包裹的表单使用form-group，只对表单起作用，对于label不起作用。