Bootstrap—输入框组input-group

Bootstrap的输入框组(input-group)提供了一种简便的方法来在输入框前后添加文本或按钮元素。通过添加适当的class,如`form-control`和`input-group-addon`,可以轻松实现这种常见设计,常用于商城搜索框等场景,方便自定义样式以适应项目需求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

相信你在很多的网站页面上都看见过这样的输入框:

这样的输入框我们通过原生的手写css也能实现,但是使用Bootstrap的输入框组会让你实现起来更加简便。

实现在输入框前后添加元素的代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入框组</title>
    <link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>
    <div class="container" style="width: 300px;margin-top: 20px">
        <form action="#">
            <div class="input-group form-group">
                <span class="input-group-addon">@</span>
                <input type="text" class="form-control">
                <span class="input-group-addon">$</span>
            </div>
        </form>
    </div>
</body>
</html>

使用input-group,轻松在输入框前后添加文本或者按钮元素,使用方法如下:

1.用一<div class="input-group">包裹住输入框input按钮。

2.给input加上class="form-control"样式。

3.在input的前/后添加一个<span class="input-group-addon"><span>,在span中添加文本或者其他元素。

如:左右边添加文本(效果如上图中第一个输入框所示):

<div class="input-group form-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control">
    <span class="input-group-addon">$</span>
</div>

左边添加复选框:

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

左边添加单选按钮:

<div class="input-group form-group">
                <span class="input-group-addon">
                    <input type="radio"/>
                </span>
            <input type="text" class="form-control"/>
        </div>
右边添加按钮(注意这时我们不再是在span中添加class .input-group-addon样式,而是添加input-group-btn
 <div class="input-group form-group">
            <input type="text" class="form-control"/>
                 <span class="input-group-btn">
                     <button class="btn btn-primary">搜索</button>
           </span>
 </div>

这样的组件很多情况下都会用到,比如说商城的搜索框等,我们可以通过改变button的颜色等样式来适应项目的需求


本文参考资料来自:http://www.runoob.com/bootstrap/bootstrap-input-groups.html

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值