在 Bootstrap 5 中，输入框组（Input Groups）是一种将多个输入元素（如按钮、文本框、图标等）组合在一起的结构，用于提供更加丰富的表单控件组合。输入框组常用于在一个输入框旁边添加附加内容，例如添加前缀、后缀、按钮、搜索框等。

1. 基本输入框组

以下是一个基本的输入框组示例：

<div class="input-group">
  <span class="input-group-text" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
  • .input-group：为输入框组容器提供样式。
  • .input-group-text：为输入框旁边的附加文本（如符号、前缀、后缀等）提供样式。
  • aria-describedby：用于将附加文本与输入框关联，增强可访问性。

2. 输入框组与按钮

你可以将按钮与输入框组合，常用于搜索框、提交按钮等。

<div class="input-group">
  <input type="text" class="form-control" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-secondary" type="button">Search</button>
</div>
  • .btn：为按钮提供样式。
  • btn-outline-secondary：为按钮提供不同的样式，通常是一个边框按钮。

3. 输入框组与选择框

在输入框组中，还可以添加选择框（如下拉菜单），以提供更多的选择功能。

<div class="input-group">
  <select class="form-select" id="inputGroupSelect01">
    <option selected>Choose...</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>
  • .form-select：为下拉菜单提供样式。
  • .form-control：为输入框提供样式。

4. 输入框组与图标

你还可以在输入框组中添加图标，通常通过与 Font Awesome 或其他图标库结合使用。

<div class="input-group">
  <span class="input-group-text" id="basic-addon1"><i class="bi bi-search"></i></span>
  <input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="basic-addon1">
</div>
  • <i class="bi bi-search"></i>：这里使用了 Bootstrap Icons（bi-search）来展示一个搜索图标。

5. 带有前后缀的输入框

你还可以为输入框组添加前后缀内容，例如货币符号或单位。

带有前缀的输入框

<div class="input-group">
  <span class="input-group-text">$</span>
  <input type="text" class="form-control" placeholder="Amount" aria-label="Amount (to the nearest dollar)">
</div>
  • 前缀 $：为输入框添加货币符号。

带有后缀的输入框

<div class="input-group">
  <input type="text" class="form-control" placeholder="Height" aria-label="Height">
  <span class="input-group-text">cm</span>
</div>
  • 后缀 cm：为输入框添加单位。

6. 大小调整的输入框组

Bootstrap 5 允许你对输入框组的大小进行调整，包括 sm（小）和 lg（大）等选项。

小号输入框组

<div class="input-group input-group-sm">
  <input type="text" class="form-control" placeholder="Small input">
</div>
  • .input-group-sm：缩小输入框组。

大号输入框组

<div class="input-group input-group-lg">
  <input type="text" class="form-control" placeholder="Large input">
</div>
  • .input-group-lg：放大输入框组。

7. 带有多个附加元素的输入框组

输入框组允许添加多个附加元素，如多个按钮或文本。

<div class="input-group">
  <button class="btn btn-outline-secondary" type="button">Button 1</button>
  <button class="btn btn-outline-secondary" type="button">Button 2</button>
  <input type="text" class="form-control" placeholder="Multiple buttons" aria-label="Multiple buttons">
</div>
  • 多个按钮：可以在输入框前后添加多个按钮元素。

8. 禁用输入框组

你可以禁用整个输入框组，使其不可用。

<div class="input-group">
  <input type="text" class="form-control" placeholder="Disabled input" aria-label="Disabled input" disabled>
  <button class="btn btn-outline-secondary" type="button" disabled>Button</button>
</div>
  • disabled：禁用输入框和按钮。

总结

Bootstrap 5 的输入框组（Input Groups） 提供了一种非常灵活和简洁的方式来组合各种输入元素，如文本框、按钮、图标和下拉菜单等。你可以根据需要将这些元素组合在一起，构建出更丰富、功能更强大的表单控件。通过简单的类，Bootstrap 使得这些输入框组的实现和自定义变得非常简单。