Bootstrap4 输入框组

Bootstrap4是当前最流行的前端开发框架之一，它能够使开发者快速、高效地构建网站和应用程序。其中一个最受欢迎的组件是输入框组，在本文中，我将详细介绍Bootstrap4的输入框组。

输入框组基础

输入框组由文本框和一个或多个附加按钮或文本标签组成。我们可以使用Bootstrap4的<div>元素和一些相关的类来创建输入框组。下面是一个基本的例子：

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
</div>

在这个例子中，我们使用了input-group和input-group-prepend类来创建一个输入框组。文本框由input元素和form-control类创建，后者确保文本框填充整个输入框组的宽度。placeholder属性在文本框中显示占位符文本，aria-label属性为屏幕阅读器提供了文本框的标签。框组前缀是一个包含input-group-text类的span元素，后者包含了标签@。如果你想添加按钮而不是文本标签，你可以替换掉span元素并使用button元素，如下所示：

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

在这个例子中，我们将输入框组后缀替换成了一个包含了button元素的div元素。btn和btn-outline-secondary类创建了一个带边框的按钮。如果需要输入框组中添加多个按钮，可以使用input-group-btn、input-group-addon 类来创建两个附加按钮组件。

尺寸和变化

Bootstrap4提供了多种尺寸和样式的输入框组，开发人员可以根据需求调用。下面是一些最流行的变化：

• input-group-lg和input-group-sm用于设置输入框组的尺寸
• input-group-text类和form-control-plaintext类可用于修改包含标签或文本的框组
• input-group-addon类代替了input-group-text类，可以以后还需要更多类
• input-group-vertical类可用于创建垂直输入框组而不是水平输入框组
• 调整边框弧度（border-radius）可以通过添加自定义边框类实现

表单支持

Bootstrap4的框架还提供了完善的表单支持，包括各种表单组件的样式（例如文本框、单选按钮、多选框等等）。在使用输入框组时，需要在输入框组外包裹一个表单元素。

<form>
   <div class="input-group mb-3">
     <input type="text" class="form-control" placeholder="Search" aria-label="Recipient's username" aria-describedby="button-addon2">
     <div class="input-group-append">
       <button class="btn btn-outline-secondary" type="button" id="button-addon2">Search</button>
     </div>
   </div>
 </form>

表单元素可以使accept-charset,action,autocomplete,enctype,method,name,novalidate,target属性以及一个表单控件的集合被封装成一个表单。可用于以下操作：

• 在一个表单中包含多个输入框组件以便一次发送表单
• 添加表单验证
• 调整提交按钮行为
• 发送到特定的服务器路径或打开发送数据的新页面

总结

输入框组是Bootstrap4框架中非常流行的组件，并提供了多种样式和配置选项。在使用输入框组时，需要包装在表单元素中，以便添加表单验证等操作。开发人员可以通过添加类来自定义输入框组，并使用Bootstrap4提供的其他表单组件一起使用。