开发者学堂课程【前端开发框架 Bootstrap 使用教程：15-Bootstrap 全局 css 样式-表单3】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/360/detail/4234
15-Bootstrap 全局 css 样式-表单3
目录
一、校验状态
二、控制尺寸
三、辅助文本
一、校验状态
BoofStrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。
使用时，添加has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。
任何包含在此元素之内的.controllabel、.forb-control 和.help-block 元素都将接受这些校验状态的样式。
将验证状态传达给辅助设备和盲人用户
使用这些校验样式只是为表单控件提供一个可视的、基于色彩的提示，但是并不能将这种提示信息传达给使用辅助设备的用户·例如屏幕阅读器或者色盲用户。
为了确保所有用户都能获取正确信息，Bootstrap 还提供了另一种提示方式，例如，你可以在表单控件的<Iabel>标签上以文本的形式显示提示信息(就像下面代码中所展示的)；包含一个 Gyoncon 字体图标(还有赋予.sronly 类的文本信息·参考 Gtyphicon 字体图际实例)；或者提供一个额外的辅助信息块。
另外，对于使用辅助设备的用户，无效的表单控件还可以赋子一个 arda dmalad-ntrue- 属性。
添加额外的图标
你还可以针对校验状态为输入框添加额外的图标。只需设置档的 has-feadback 类并添加正确的图标即可。
反馈图标(feedback icon)只能使用在文本输入框<input=“from-contro1">元素上。
图标、label 和输入控件组
对于不带有 label 标签的输入框以及石侧带有附加组作的输入框组，需要手动为其图标定位。
为了让所有用户都能访问你的网站，我们强烈建议为所有输入框添加 label 标签，如果你不希望将 1abel标签展示出来，可以通过添加 .sr-only 类来实现。如果的确不能添加 label 标签，请调整图标的 top 值。对于输入框组，请根据你的实际情况调整 right 值。
向辅助技术设备传递图标的含义
为了确保辅助技术，如屏幕阅读器，正确传达一个图标的含义，额外的隐藏的文本应包含在.sr-only 类中，并明确关联使用了 aria-describaoby 的表单控件。或者，以某些其他形式(例如，文本输入字段有一个特定的警告信息)传达含义，例如改变与表单控件实际相关联的，<label>的文本。
虽然下面的例子已经提到各自表单控件本鸟的<label>文本的验证状态,上述技术（使用 .sr-only 文本和aria-describedby))已经包括了需要说明的目的。
使用这类标签可以使我们的意思表达的更加清楚
二、控件尺寸
通过.input-1g 类似的类可以为控件设置高度，通过 col-g-类似的类可以为控件设置宽度。
高度尺寸
创建大一些或小一些的表单控件以匹配按钮尺寸。
水平排列的表单组的尺寸
通过添加，form-group-lg 或 .form-group-sm 类,为 ,form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。
三、辅助文本
针对表单控件的“块(block)”级辅助文本。
与表单控件相关联的帮助文本
与表单控件相关联的帮助文本 aria-describedby 属性的表单控件关联，这将确保使用辅助技术-如屏幕阅读器的用户获取控件焦点或进入控制时显示这个帮助文本
