输入组 Input group
输入组可以在文本输入框两侧挂上文字、按钮或下拉菜单,把「前缀 / 后缀 / 操作」和输入框融为一体,常用于用户名、金额、搜索等场景。
基础
用 input-group 包裹输入框,input-group-text 作为前缀或后缀;前缀、后缀可以同时出现,也可以两侧各放一个。
@
@example.com
¥
.00
HTML 示例
按钮附加
在输入组里直接放 button 即成为输入框的一部分;本例点击「搜索」会读取输入框内容并在下方显示结果。
尚未搜索。
HTML 示例
下拉附加
按钮上加 dropdown-toggle 与 data-bs-toggle="dropdown",点击即可展开下拉菜单;选择一个菜单项后输入框内容会随之更新。
HTML 示例
多输入拼接
一个输入组里可以并排放多个 <input>,视觉上连成一体;注意校验样式只对单输入框的输入组生效。
姓名
HTML 示例
校验样式
在输入框上加 is-valid / is-invalid,输入组会自动继承对应颜色;配合 valid-feedback / invalid-feedback 给出提示。
https://
.com
网址格式正确。
邮箱
邮箱地址不完整,缺少域名部分。
HTML 示例