表单控件
输入框
输入框通过为 <input>
元素添加类 form-control
实现,支持通过 type
属性设置输入框类型。
选择框
通过为 <select>
元素添加 form-control
类来使用选择框,包括单选和多选模式。
单选框
多选框
TIP
使用多选框时通常需要指定多选框高度。
多行文本框
通过为 <textarea>
元素添加 form-control
类来使用多行文本框。
特殊表单控件
在浏览器支持的情况下,还可以为 type
设置一些特殊类型。
日期
设置 <input type="date">
。
时间
设置 <input type="time">
。
日期时间
设置 <input type="datetime-local">
。
月份
设置 <input type="month">
。
周数
设置 <input type="week">
。
范围
设置 <input type="range">
。
颜色
设置 <input type="color">
。
文件
设置 <input type="file">
。
尺寸
通过为表单控件添加 size-*
工具类来设置尺寸。
禁用
通过为表单控件添加 disabled
属性来禁用表单控件。
只读
通过为表单控件添加 readonly
属性来表单控件只读。
特殊状态
通过为表单控件或者其直接父级元素添加工具类 has-error
、has-warning
和 has-error
来让其拥有特殊语义的状态。
CSS 类
表单控件提供了如下 CSS 类:
类 | 类型 | 作用 |
---|---|---|
form-control | 实体类 | 元素作为表单控件组件 |
size-sm | 工具类 | 表单控件使用小号尺寸 |
size-lg | 工具类 | 表单控件使用大号尺寸 |
CSS 变量
表单控件提供了如下 CSS 变量,可进行全局修改。
CSS 变量名 | 作用 |
---|---|
--form-control-radius | 圆角 |
--form-control-border | 边框颜色 |
--form-control-focus | 激活颜色 |
--form-control-disabled | 禁用颜色 |
--form-control-readonly | 只读颜色 |