表单
基本用法
为 <form>
元素使用类 .form
类来获得表单外观,将表单控件放置在表单控件组 .form-group
内,将表单操作按钮放置在表单操作栏 .form-actions
中。
水平布局的表单
为 <form>
元素使用类 .form-horz
类来让表单实现水平布局。
在水平布局表单中,如果需要在一行包含多个表单控件,可以使用 .form-row
类,下面是一个更复杂的例子:
网格布局
为 <form>
元素使用类 .form-grid
类来让表单实现网格布局。
帮助性文本
使用 form-tip
来显示帮助性的文本并添加到表单控件组中。
校验状态
通过为表单控件组添加 has-warning
、has-error
、has-success
类即可应用相应的效验状态样式。这些样式会影响到表单控件组内的 label
、.form-control
和 .form-tip
元素。
表单分组
使用fieldset 将多个表单控件放置在一起进行分组。在<fieldset>
内使用 <legend>
来定义分组标题。
标记必填项
标记必填项的一种通用方法是在标签上添加星标 *
, 在表单控件组中只需要为表单组标签 .form-label
添加 required
类。
水平布局的表单中也可以使用:
CSS 类
表单提供了如下 CSS 类
类 | 类型 | 作用 |
---|---|---|
form-group | 实体类 | 元素作为表单组件 |
form-label | 实体类 | 元素作为表单组标签 |
form-control | 实体类 | 元素作为表单控件组件 |
form-tip | 实体类 | 元素作为表单控件的提示性文本 |
form-actions | 实体类 | 元素作为表单按钮容器 |
form-grid | 修饰类 | 为表单启用水平排列样式 |
required | 修饰类 | 为表单控件启用必填标记样式 |
has-error | 修饰类 | 为表单控件启用报错样式 |
has-warning | 修饰类 | 为表单控件启用警告样式 |
has-success | 修饰类 | 为表单控件启用成功样式 |
CSS 变量
变量名称 | 变量含义 |
---|---|
--form-label-color | 表单组标签颜色 |
--form-tip-color | 帮助性文本默认颜色 |
--form-grid-label-width | 水平布局时表单表单组标签宽度 |