Bootstrap 表单

Bootstrap 表单

Bootstrap 表单分为三种表单布局：

1. 垂直表单（默认）
2. 内联表单
   为 form 元素添加 .form-inline 类
3. 水平表单
   为 form 元素添加 .form-horizontal 类

在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%;

所有设置了 .form-control 类的 input、textarea 和 select 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

默认情况：

内联表单
为 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

视口（viewport）小于 768px 宽度时

如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为 label 设置 .sr-only 类将其隐藏。

水平表单
通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。
向标签添加 class .control-label。

效果：

校验状态

Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。

还有很多类，我就不一一介绍了，官方网站更加详细