Bootstrap 输入组（Input Group）技术教程 – 实战案例讲解

输入组（Input Group）是Bootstrap提供的一个用于扩展表单输入的组件，允许你将输入框与文本或按钮等组件组合在一起，以创建更复杂的用户界面元素。

1. 基本用法

一个简单的输入组示例，通过添加前缀或后缀文本：

<div class="form-group">
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1">@</span>
        </div>
        <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
</div>
    

2. 添加按钮

你可以将按钮添加到输入组的开始或结束位置：

<div class="form-group">
    <div class="input-group">
        <div class="input-group-prepend">
            <button class="btn btn-primary" type="button">Go!</button>
        </div>
        <input type="text" class="form-control" placeholder="Search">
    </div>
</div>
    

3. 多个输入框

通过组合多个输入组，你可以创建具有多个输入框的更复杂的输入组。

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text" id="inputGroup-sizing-default">First and lastname</span>
    </div>
    <input type="text" class="form-control" aria-label="First name" aria-describedby="inputGroup-sizing-default">
    <input type="text" class="form-control" aria-label="Last name">
</div>
    

总结

本教程详细讲解了Bootstrap输入组（Input Group）的基本用法以及几个常见的使用场景。通过结合前缀/后缀文本、按钮和多个输入框，你可以轻松创建复杂且用户友好的表单输入组件。

希望这篇教程对你有所帮助！如果还有其他问题，欢迎在评论区留言交流。