如何用Bootstrap制作输入框组

在应用Bootstrap的时候,输入框是使用率很高的元素。但是,单个的输入框已经不能满足如今的用户需求了,通常需要多个元素组合在一起形成输入框组。下面小编就教大家用Bootstrap来制作输入框组。

东西/材料

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

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

  • End
  • 发表于 2018-03-09 00:00
  • 阅读 ( 1186 )
  • 分类:电脑网络

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
联系我们:uytrv@hotmail.com 问答工具