Bootstrap 输入框组

Bootstrap 的输入框组（Input Group）是其组件库中的一个实用组件，用于将输入框（<input>）与附加元素（如按钮、文本、图标或下拉菜单）组合在一起，形成一个统一的输入界面。输入框组常用于表单、搜索栏或需要附加上下文的输入场景。以下是对Bootstrap 输入框组的中文讲解，涵盖核心功能、类名、用法和示例，基于最新版本 Bootstrap 5.3.3（截至 2025 年 10 月 11 日）。

Bootstrap 输入框组示例

基本输入框组

带按钮

搜索

带图标

不同尺寸

大

小

带下拉菜单

选择

多输入框和多添加项

名字

姓氏

复选框/单选按钮

1. Bootstrap 输入框组概述

Bootstrap 的输入框组通过 .input-group 类将输入框与附加元素（如文本、按钮或下拉菜单）组合在一起，形成一个统一的视觉和交互单元。其主要特点包括：

统一样式：输入框和附加元素无缝连接，保持一致的外观。
灵活性：支持前置或后置文本、按钮、图标、下拉菜单等。
响应式：自动适配不同屏幕尺寸，适合移动端和桌面端。
可访问性：支持 ARIA 属性，优化屏幕阅读器体验。
可定制：通过 Sass 变量调整样式。

输入框组通常由以下元素组成：

容器：<div> 使用 .input-group 类。
输入框：<input> 使用 .form-control。
附加元素：<span>（.input-group-text）、<button> 或其他组件。

2. 核心输入框组类

以下是Bootstrap 输入框组的主要类和用法：

(1) 基本输入框组

使用 .input-group 包裹输入框和附加元素，.input-group-text 用于文本或图标。

用法：

  <div class="input-group mb-3">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="用户名">
  </div>

效果：文本（如 @）与输入框无缝连接，mb-3 添加底部间距。

(2) 带按钮的输入框组

将按钮与输入框组合，按钮使用 .btn 和主题类（如 .btn-primary）。

用法：

  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="搜索">
    <button class="btn btn-primary" type="button">搜索</button>
  </div>

(3) 带图标的输入框组

结合 Bootstrap Icons 或其他图标库，使用 .input-group-text 显示图标。

用法：

  <div class="input-group mb-3">
    <span class="input-group-text"><i class="bi bi-envelope"></i></span>
    <input type="email" class="form-control" placeholder="邮箱">
  </div>

注意：需引入 Bootstrap Icons 或其他图标库。

(4) 不同尺寸

调整输入框组的尺寸：

.input-group-lg：大尺寸。
.input-group-sm：小尺寸。
默认尺寸：无额外类。
用法：

  <div class="input-group input-group-lg mb-3">
    <span class="input-group-text">大</span>
    <input type="text" class="form-control" placeholder="大输入框">
  </div>

(5) 带下拉菜单

将下拉菜单嵌套在输入框组中，结合 .dropdown-toggle 和 .dropdown-menu。

用法：

  <div class="input-group mb-3">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      选择
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">选项 1</a></li>
      <li><a class="dropdown-item" href="#">选项 2</a></li>
    </ul>
    <input type="text" class="form-control" placeholder="输入内容">
  </div>

(6) 多输入框和多添加项

支持多个输入框或附加元素在一个输入框组中。

用法：

  <div class="input-group mb-3">
    <span class="input-group-text">名字</span>
    <input type="text" class="form-control" placeholder="名字">
    <span class="input-group-text">姓氏</span>
    <input type="text" class="form-control" placeholder="姓氏">
  </div>

(7) 复选框或单选按钮

将复选框或单选按钮嵌入输入框组，使用 .input-group-text 包裹 .form-check-input。

用法：

  <div class="input-group mb-3">
    <div class="input-group-text">
      <input class="form-check-input mt-0" type="checkbox" value="">
    </div>
    <input type="text" class="form-control" placeholder="输入内容">
  </div>

(8) 响应式输入框组

结合响应式工具类调整输入框组在不同屏幕尺寸下的行为。

用法：

  <div class="input-group d-flex flex-column flex-md-row">
    <span class="input-group-text">输入</span>
    <input type="text" class="form-control" placeholder="小屏幕垂直，中等屏幕水平">
  </div>

3. 与表单验证结合

输入框组可以与Bootstrap 的验证样式结合，显示成功或错误状态。

用法：

  <div class="input-group mb-3">
    <span class="input-group-text">@</span>
    <input type="email" class="form-control is-invalid" placeholder="邮箱">
    <div class="invalid-feedback">请输入有效的邮箱地址。</div>
  </div>

4. JavaScript 行为

输入框组中的下拉菜单或按钮交互依赖 bootstrap.bundle.min.js（包含 Popper.js）。

事件监听（例如下拉菜单）：

  const dropdowns = document.querySelectorAll('.dropdown-toggle');
  dropdowns.forEach(dropdown => {
    dropdown.addEventListener('show.bs.dropdown', () => {
      console.log('下拉菜单展开');
    });
  });

5. 定制输入框组

输入框组的样式基于 Sass 变量，可通过以下方式定制：

颜色：$input-group-addon-bg、$input-group-addon-color。
边框：$input-group-border-color、$input-group-border-radius。
尺寸：$input-group-font-size。

定制示例：

// custom.scss
$input-group-addon-bg: #e9ecef;
$input-group-border-color: #007bff;
$input-group-border-radius: 0.5rem;

@import "node_modules/bootstrap/scss/bootstrap";

编译后引入：

<link href="custom.css" rel="stylesheet">

6. 注意事项

JavaScript 依赖：下拉菜单功能需引入 bootstrap.bundle.min.js。
可访问性：为附加元素（如 .input-group-text）添加 aria-label 或 aria-describedby，确保屏幕阅读器支持。
布局问题：确保输入框组在小屏幕上不溢出，可结合 .input-group-sm 或响应式类。
性能：避免过多嵌套复杂元素（如多个下拉菜单），保持 DOM 简洁。
验证：验证样式需与 .form-control 结合，确保反馈文本正确显示。

7. 学习资源

官方文档：https://getbootstrap.com/docs/5.3/components/input-group/
中文教程：https://www.bootcss.com/（非官方）
X 平台：搜索“Bootstrap 输入框组”或“Bootstrap Input Group”，查看社区分享的设计技巧。

如果你需要更详细的输入框组讲解（例如动态输入框组、复杂验证）或实现特定效果的代码，请告诉我，我可以提供进一步的指导或示例！