如何用Bootstrap制作输入框组

2022-09-13 21:20:10 发布:网友投稿
热度:32

工具/材料

崇高的文本

操作方法 01

首先,用崇高文本工具创建一个新的HTML5页面,导入引导样式文件和脚本文件,如下图所示。

02

然后我们调用输入组样式,这样输入框组中的元素就在同一行,如下图所示。

03

当然,input-group-addon不仅可以放在输入框前面,还可以放在输入框后面,如下图所示。

04

也可以使用input-group-lg样式使输入框组中的元素变大,还有其他样式可以控制大小。可以查一下API。

05

接下来,还可以在input前面添加一个复选框,如下图所示,将复选框放在input-group-addon中。

06

也可以在输入框组中定义按钮按钮,如下图所示,按钮可以由btn-default、btn-primary等定义。

07

最后,还可以在输入框前添加下拉菜单,这也是常用的功能,如下图所示。

下一篇:护身金刚结的编法图解
上一篇:卫生服务站是干啥的