Bootstrap 表单
Bootstrap 表单分为三种表单布局:
- 垂直表单(默认)
- 内联表单
为 form 元素添加 .form-inline 类 - 水平表单
为 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 元素都将接受这些校验状态的样式。
还有很多类,我就不一一介绍了,官方网站更加详细