排行时报

如何用Bootstrap制作输入框组

科技数码  2022-12-31 09:52:28  热度:67℃

Sublime Text

01、首先用Sublime Text工具新建HTML5页面,导入bootstrap的样式文件和脚本文件,如下图所示

02、然后我们调用input-group样式来让输入框组中的元素在同一行,如下图所示

03、当然input-group-addon不只可以放在输入框的前面,也可以放在输入框的后面,如下图所示

04、也可以通过input-group-lg样式让输入框组中的元素变大,还有其他的一些控制大小的样式你可以查一下API

05、接下来你也可以在input前面加入复选框,如下图所示,将复选框放在input-group-addon里即可

06、还可以在输入框组中定义button按钮,如下图所示,按钮可以通过btn-default,btn-primary等来定义样式

07、最后也可以在输入框的前面加入下拉菜单,这种也是比较常用的功能,如下图所示

最近更新

  • 怎么将wps输出为pdf的文字水印设置为单行

    怎么将wps输出为pdf的文字水印设置为单行

    2025-04-26694阅读

  • Ubuntu 20.04新增仓颉输入法

    Ubuntu 20.04新增仓颉输入法

    2025-04-26669阅读

  • 950显卡能吃鸡吗

    950显卡能吃鸡吗

    2025-04-27834阅读

  • 扫描件是什么格式的

    扫描件是什么格式的

    2025-04-26692阅读

  • win7怎么设置屏幕休眠密码(win7屏幕保护设置密码)

    win7怎么设置屏幕休眠密码(win7屏幕保护设置密码)

    2025-04-26749阅读

  • 电脑怎么删除桌面图标 笔记本电脑如何删除桌面上的图标

    电脑怎么删除桌面图标 笔记本电脑如何删除桌面上的图标

    2025-04-26746阅读

  • 怎么用vlookup匹配数据?

    怎么用vlookup匹配数据?

    2025-04-26624阅读

  • 嗜睡说明了什么问题

    嗜睡说明了什么问题

    2022-12-21838阅读

  • 入睡很困难该怎么办

    入睡很困难该怎么办

    2022-12-20889阅读

  • 发质不好可以怎么办

    发质不好可以怎么办

    2022-12-21879阅读

  • 精选专题