Bootstrap—输入框组input-group

最新推荐文章于 2025-07-03 13:05:02 发布

原创最新推荐文章于 2025-07-03 13:05:02 发布 · 4.2w 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#Bootstrap #输入框组

Bootstrap 同时被 2 个专栏收录

17 篇文章

订阅专栏

Bootstrap学习之路

17 篇文章

订阅专栏

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