为了账号安全,请及时绑定邮箱和手机立即绑定

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

2021.02.28 14:39 167浏览

1. 概述

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

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

2. 使用输入组

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

代码如下:

  			<div class="col-md-6">
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon"></div>
                        <input type="text" class="form-control">
                        <div class="input-group-addon"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">
                            <input type="checkbox">
                        </div>
                        <input type="text" class="form-control">
                    </div>
                </div>
            </div>

效果如下,可见使用输入组后,确实样式好看了许多。
在这里插入图片描述

3. 调整输入组的大小

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

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

 			<div class="col-md-6">
                <div class="form-group">
                    <div class="input-group input-group-lg">
                        <div class="input-group-addon"></div>
                        <input type="text" class="form-control">
                        <div class="input-group-addon"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <div class="input-group input-group-sm">
                        <div class="input-group-addon"></div>
                        <input type="text" class="form-control">
                        <div class="input-group-addon"></div>
                    </div>
                </div>
            </div>

对比效果如下,左上角为默认尺寸,左下角为大号尺寸,右下角为小号尺寸。
在这里插入图片描述

4. 小结

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

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消