输入框组(Input Group)是Bootstrap提供的一个强大组件，它允许您在输入框的前面或后面添加额外的元素，如文本、按钮、图标或下拉菜单。这可以增强表单的功能性和用户体验。
Bootstrap 4 使用 .input-group 类来创建输入框组，通过 .input-group-prepend 和 .input-group-append 添加前置和后置元素。
<!-- 前置文本 -->
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="用户名" aria-label="用户名" aria-describedby="basic-addon1">
</div>
<!-- 后置文本 -->
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="收件人用户名" aria-label="收件人用户名" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
</div>
<!-- 前置和后置文本 -->
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">https://</span>
</div>
<input type="text" class="form-control" id="basic-addon3" placeholder="example.com" aria-label="example.com">
<div class="input-group-append">
<span class="input-group-text">.com</span>
</div>
</div>
您可以在输入框组中添加按钮，提供额外的交互功能。
<!-- 前置按钮 -->
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">搜索</button>
</div>
<input type="text" class="form-control" placeholder="输入关键词...">
</div>
<!-- 后置按钮 -->
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="输入邮箱...">
<div class="input-group-append">
<button class="btn btn-outline-primary" type="button">订阅</button>
</div>
</div>
<!-- 分段按钮 -->
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="搜索内容...">
<div class="input-group-append">
<button type="button" class="btn btn-outline-secondary">操作</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
<span class="sr-only">切换下拉菜单</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">操作</a>
<a class="dropdown-item" href="#">另一个操作</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">其他操作</a>
</div>
</div>
</div>
在输入框组中集成下拉菜单，提供更多选项选择。
<!-- 前置下拉菜单 -->
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown">选项</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>
<!-- 分段下拉菜单 -->
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">操作</button>
<button class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown">
<span class="sr-only">切换下拉菜单</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
</div>
Bootstrap 4 提供了不同尺寸的输入框组，以适应不同的设计需求。
<!-- 小尺寸 -->
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text">小</span>
</div>
<input type="text" class="form-control">
</div>
<!-- 默认尺寸 -->
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">默认</span>
</div>
<input type="text" class="form-control">
</div>
<!-- 大尺寸 -->
<div class="input-group input-group-lg mb-3">
<div class="input-group-prepend">
<span class="input-group-text">大</span>
</div>
<input type="text" class="form-control">
</div>
通过自定义CSS样式，您可以创建独特的输入框组设计。
/* 自定义输入框组样式 */
.input-group-custom .input-group-text {
background-color: #6f42c1;
color: white;
border-color: #6f42c1;
}
.input-group-custom .form-control:focus {
border-color: #6f42c1;
box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.25);
}
/* 圆角输入框组 */
.rounded-left {
border-top-left-radius: 0.5rem !important;
border-bottom-left-radius: 0.5rem !important;
}
.rounded-right {
border-top-right-radius: 0.5rem !important;
border-bottom-right-radius: 0.5rem !important;
}
使用输入框组时，遵循以下最佳实践可以提升用户体验和可访问性。