栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > Bootstrap教程

Bootstrap教程(10)--使用输入组来组合控件

Bootstrap教程(10)--使用输入组来组合控件

1. 概述

Bootstrap还提供了一种组合使用表单控件的方式,即输入组。可以为输入控件添加前置、后置的补充内容。

注意补充内容可以是文本,也可以是其他表单控件。

2. 使用输入组

输入组的使用并不复杂,通过.input-group类修饰的元素包裹输入控件,然后在输入控件的前、后添加.input-group-addon类修饰的元素即可。

代码如下:

  			

效果如下,可见使用输入组后,确实样式好看了许多。

3. 调整输入组的大小

输入组同样可以通过设置样式类,来调整整个输入组元素的大小。

代码如下,我们为输入组设置了.input-group-lg和.input-group-sm。

 			

对比效果如下,左上角为默认尺寸,左下角为大号尺寸,右下角为小号尺寸。

4. 小结

Bootstrap输入组提供了一种组合使用控件的方式,样式更加美观,也比较实用。

转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号