输入组
通过在文本输入框 <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 | 输入组附加部分背景颜色 |