Skip to content

表单控件

输入框

输入框通过为 <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-errorhas-warninghas-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只读颜色