Skip to content

输入组

通过在文本输入框 <input> 前面、后面或是两边加上文字、图标或按钮,可以实现对表单控件的扩展。

使用方法

在元素使用工具类 .input-group 作为输入组容器,然后在内部添加表单控件、按钮或附加文本(.input-group-addon)。

账号
密码

组合方式

在输入组内部可以将不同的内容按需组合使用,包括附加文本(.input-group-addon)、表单控件(.form-control)、按钮(.btn)。

登录

尺寸

除了默认大小,输入组还提供了额外的 2 种预设尺寸,通过修饰类 .size-* 来应用尺寸。

登录
登录
登录

CSS 类

输入组提供了如下 CSS 类:

类型作用
input-group实体类元素作为输入组组件
input-group-addon实体类元素作为输入组内部额外元素
size-sm工具类输入组使用小号尺寸
size-lg工具类输入组使用大号尺寸

CSS 变量

变量名称变量含义
--input-group-addon-bg输入组附加部分背景颜色