Bootstrap 4 输入框组学习笔记

Bootstrap 4提供了许多易于使用的UI组件，其中输入框组是其中之一。输入框组使创建表单更加简单和有效，并使表单更具可读性和易于使用。以下是Bootstrap 4输入框组的一些关键点和用法。

基本用法

输入框组由一些列相关的表单控件（如文本输入框、下拉菜单、单选按钮或复选框）组成。在Bootstrap 4中，输入框组由.input-group类定义。

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

htmlCopy Code
<div class="input-group">
  <input type="text" class="form-control" placeholder="Username">
</div>

在这个示例中，我们使用了.input-group类为输入框组容器，以及使用了标准的文本输入框作为其子元素。输入框组还可以包含其他类型的表单控件，例如下拉菜单或按钮。

添加附加内容

您可以通过添加附加内容使输入框组更具功能性和可读性。例如，您可以在输入框前后添加文本或图标。以下是在输入框前后添加文本和图标的示例：

htmlCopy Code
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text"><i class="fa fa-user"></i></span>
  </div>
  <input type="text" class="form-control" placeholder="Username">
  <div class="input-group-append">
    <span class="input-group-text">@example.com</span>
  </div>
</div>

在这个示例中，我们使用.input-group-prepend和.input-group-append类分别在输入框的前后添加了图标和文本。我们还使用了<span>元素和其他Bootstrap组件（如Font Awesome）来定义图标的样式。

添加多个输入框

您可以使用输入框组添加多个相关的表单控件。例如，您可以在输入框组中添加两个文本输入框以便输入电子邮件和密码。以下是一个示例：

htmlCopy Code
<div class="input-group">
  <input type="email" class="form-control" placeholder="Email">
  <input type="password" class="form-control" placeholder="Password">
  <div class="input-group-append">
    <button class="btn btn-primary" type="submit">Sign In</button>
  </div>
</div>

在这个示例中，我们使用了两个文本输入框作为输入框组的子元素，并在其后添加了一个登录按钮。

总结

Bootstrap 4的输入框组提供了一种简单而功能性的方法来创建表单。您可以通过添加附加内容和多个表单控件来进一步定制和扩展输入框组。希望这些示例能帮助您更好地理解输入框组的用法和特点。