bootstrap表单控件学习笔记

表单控件

文本域:与原始文本域使用方式相同,可以通过rows定义高度,设置cols定义宽度。但如果在文本域中添加了“form-control类”文本宽度为100%或auto,无需设置宽度。

复选框(checkbox)和单选按钮(radio):checkbox和radio外面套上label标签后再套一层类名为.checkbox(.radio)的div。该div用于处理复选框单选框与标签的对齐方式。

复选框(checkbox)和单选按钮(radio)水平排列:如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline”。如果radio需要水平排列,只需要在label标签上添加类名“radio-inline”(在水平排列的情况下不必再添加.checkbox(.radio)类,因为水平排列的类名中已经包含了处理选框与label对齐的样式,两者之间重复添加会产生冲突)

表单控件状态(焦点状态):焦点状态是通过伪类“:focus”来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式,重新添加阴影效果。要让控件在焦点状态下有上面样式效果,需要给控件添加类名“form-control”

表单控件状态(禁用状态):Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的,在相应的表单控件上添加属性“disabled”

向父元素添加role="form"

把标签和控件放在一个带有 class.form-group

中。这是获取最佳间距所必需的。

向所有的文本元素,