在 Bootstrap 4 中，输入框组（Input Groups） 是一个非常实用的组件，用于将多个输入框元素组合在一起，形成一个整体。它通常用于添加前缀、后缀、按钮或文本与输入框配合使用，以增强用户体验和界面美感。

基本结构

输入框组 由一个父容器（.input-group）组成，容器中可以放置输入框以及其他元素（如按钮、文本、图标等）。

1. 基本输入框组

最简单的输入框组只包含一个输入框和一个前缀或后缀。

示例：

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username">
</div>

解释：

  • input-group：包裹整个输入框组。
  • input-group-prepend：将一个元素（如文本或按钮）放置在输入框前面。
  • input-group-text：用于定义前缀或后缀文本。
  • form-control：输入框样式。

2. 带后缀的输入框组

后缀可以是文本、按钮或其他元素，通常放在输入框的右侧。

示例：

<div class="input-group">
  <input type="text" class="form-control" placeholder="Enter your email">
  <div class="input-group-append">
    <span class="input-group-text">@example.com</span>
  </div>
</div>

解释：

  • input-group-append：将元素添加到输入框的右侧。
  • input-group-text：用于定义后缀文本。

3. 带按钮的输入框组

你可以在输入框组中添加按钮，按钮通常位于输入框的前面或后面。

示例：

<div class="input-group">
  <input type="text" class="form-control" placeholder="Enter your website">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Go</button>
  </div>
</div>

解释：

  • btn：按钮样式类。
  • btn-outline-secondary：为按钮设置边框样式。
  • input-group-append：按钮放置在输入框的右侧。

4. 多个元素的输入框组

你可以在输入框组中组合多个元素，像是多个按钮、多个文本等。

示例：

<div class="input-group">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Search</button>
  </div>
  <input type="text" class="form-control" placeholder="Search something">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Go</button>
  </div>
</div>

解释：

  • input-group-prepend 和 input-group-append 用于在输入框前后分别放置按钮。
  • form-control 用于样式化输入框。

5. 带图标的输入框组

可以使用图标或其他元素作为输入框的前缀或后缀。通过 Font Awesome 或其他图标库来添加图标。

示例：

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">
      <i class="fas fa-search"></i>
    </span>
  </div>
  <input type="text" class="form-control" placeholder="Search">
</div>

解释：

  • <i class="fas fa-search"></i>：使用 Font Awesome 图标作为输入框前缀。
  • input-group-text：确保图标和输入框对齐。

6. 大小调整的输入框组

你可以使用 input-group-lg 或 input-group-sm 来调整输入框组的大小。

示例：

<!-- Large input group -->
<div class="input-group input-group-lg">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Large input">
</div>

<!-- Small input group -->
<div class="input-group input-group-sm">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Small input">
</div>

解释：

  • input-group-lg：使输入框组变大。
  • input-group-sm：使输入框组变小。

7. 动态输入框组（根据输入变化调整）

你可以动态添加或删除元素到输入框组，例如添加前缀、后缀或按钮，根据用户输入的内容进行相应的操作。

示例：

<div class="input-group">
  <input type="text" class="form-control" placeholder="Phone number">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">+1</button>
  </div>
</div>

解释：

  • 你可以在用户输入时添加一些操作，如选择国家代码，点击按钮即可加上相应的国际区号。

总结

  • input-group：包裹整个输入框组，通常用于将多个表单控件组合成一个整体。
  • input-group-prepend 和 input-group-append：用于将额外元素（如文本、按钮等）放置在输入框的前面或后面。
  • input-group-text：用于在输入框前后放置文本或图标。
  • input-group-lg 和 input-group-sm：分别用来调整输入框组的大小。

通过这些组件，你可以轻松地创建美观、功能强大的表单控件，提升用户体验。