开发者学堂课程【前端开发框架 Bootstrap 使用教程：12-Bootstrap 全局 CSS 样式-表单1】学习笔记，与课程紧密联系，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/360/detail/4231

12-Bootstrap 全局 CSS 样式-表单1

目录：

一、基本实例

二、内联表格

一、基本实例  

单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control 类的<inputy>、<textarea>和<select>元素都将被默认设置宽度属性为 width:100%；。将1abel 元素和前面提到的控件包裹在.form-group 中可以获得***的排列。

二、内联表单

为 form>元素添加，form-inline 类可使其内容左对将并且表现为 inline-block 级别的控件。

只适用于视口(viewport)至少在768px 宽度时(视口宽度再小的话就会使表单折叠)。

可能需要手动设置宽度

在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width：100%；宽度。在内联表单，我们将这些元素的宽度设置为 width:auto；，因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。

一定要添加 label 标签

如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。

对于这些内联表单，你可以通过为 label 设置.sr-only 类将其隐藏。还有一些辅助技术提供 label 标签的替代方案，比如 aria-label、aria-labelledby 或 title 属性。

如果这些都不存在，屏幕阅读器可能会采取使用 placeholder 属性，如果存在的话，使用占位符来替代其他的标记，但要注意，这种方法是不妥当的。