SublimeText
首先用Sublime Text工具新建HTML5页面，导入bootstrap的样式文件和脚本文件，如下图所示
然后我们调用input-group样式来让输入框组中的元素在同一行，如下图所示
当然input-group-addon不只可以放在输入框的前面，也可以放在输入框的后面，如下图所示
也可以通过input-group-lg样式让输入框组中的元素变大，还有其他的一些控制大小的样式你可以查一下API
接下来你也可以在input前面加入复选框，如下图所示，将复选框放在input-group-addon里即可
还可以在输入框组中定义button按钮，如下图所示，按钮可以通过btn-default,btn-primary等来定义样式
最后也可以在输入框的前面加入下拉菜单，这种也是比较常用的功能，如下图所示
如何绘制可以校验的输入框？
编辑导语：如何才能解决原型设计中输入框校验的问题？本篇文章里，作者就对如何绘制可以校验的输入框的相应流程进行了梳理，一起来看一下吧，也许会对你有所帮助。
在原型设计中，输入框校验效果设计是一件令人头疼的事情，但是可以通过使用bootstrap元件库中的输入框设置，可以轻松解决输入框校验的问题。
一、效果预览预览地址：http://atomstudio.cn/demos/bootstrap_input
二、准备工作需要安装XSTAR2022.1.22版（或更高版本）
三、操作步骤1）打开软件，选择bootstrap元件库，在元件列表中将输入框拖拽到编辑区。
2）选中编辑区的输入框组件，右侧显示出输入框设置面板。
3）在输入框设置面板中勾选验证成功提示和验证失败提示。
4）编辑提示文本内容
5）设置前缀、后缀
6）设置提示样式
7）设置验证规则
可选规则包括：
8）根据需要设置完成后，进行预览、导出或者分享。
本文由 @balabala 原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议。
