输入组和前缀后缀

在本教程中，我们将深入探讨 Bootstrap 中的输入组（Input Groups）和前缀后缀（Prefix and Suffix）的概念。输入组允许我们在输入框的前后添加文本、按钮、图标等内容，使得表单更加丰富和用户友好。

1. 输入组基础

1.1 什么是输入组？

输入组是 Bootstrap 提供的一种组件，用于在输入框的前后添加额外的内容。这些内容可以是文本、按钮、图标等，使得表单元素更加直观和易于使用。

1.2 基本结构

一个基本的输入组由以下几个部分组成：

• input-group：包裹整个输入组的容器。
• input-group-prepend：用于在输入框前添加内容。
• input-group-append：用于在输入框后添加内容。
• input-group-text：用于包裹前缀或后缀的文本。

1.3 代码示例

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

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username">
  <div class="input-group-append">
    <span class="input-group-text">@example.com</span>
  </div>
</div>

在这个示例中，我们创建了两个输入组。第一个输入组在输入框前添加了一个 @ 符号，第二个输入组在输入框后添加了一个 @example.com 后缀。

2. 前缀和后缀

2.1 前缀（Prefix）

前缀通常用于在输入框前添加固定的文本或图标，例如货币符号、单位等。

2.2 后缀（Suffix）

后缀通常用于在输入框后添加固定的文本或图标，例如单位、验证信息等。

2.3 代码示例

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
  </div>
  <input type="text" class="form-control" placeholder="Amount">
  <div class="input-group-append">
    <span class="input-group-text">.00</span>
  </div>
</div>

在这个示例中，我们在输入框前添加了一个 $ 符号作为前缀，并在输入框后添加了 .00 作为后缀。

3. 实践练习

3.1 练习目标

创建一个包含前缀和后缀的输入组，用于输入电子邮件地址。前缀为 mailto:，后缀为 @example.com。

3.2 代码实现

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">mailto:</span>
  </div>
  <input type="text" class="form-control" placeholder="Email">
  <div class="input-group-append">
    <span class="input-group-text">@example.com</span>
  </div>
</div>

3.3 运行结果

当你在输入框中输入内容时，前缀 mailto: 和后缀 @example.com 会始终显示在输入框的前后，帮助用户更直观地理解输入的内容。

4. 总结

通过本教程，我们学习了如何在 Bootstrap 中使用输入组和前缀后缀来增强表单的用户体验。输入组不仅可以让表单看起来更加美观，还能提供额外的上下文信息，帮助用户更好地理解输入的内容。

希望你能通过实践练习更好地掌握这些概念，并在实际项目中灵活运用。