Bootstrap4 输入框组

Bootstrap4 输入框组

Bootstrap 是一个流行的前端框架，用于构建响应式和移动设备优先的网站和应用程序。Bootstrap 4 是 Bootstrap 的最新版本，提供了许多内置组件和工具类，以帮助开发者快速实现各种界面效果。其中，输入框组（Form Groups）是 Bootstrap 4 中一个非常有用的功能，可以帮助我们创建更加丰富和灵活的表单元素。

一、什么是输入框组？

输入框组是 Bootstrap 4 中的一种表单组件，它可以将输入框（如文本框、选择框等）与其他元素（如按钮、标签等）组合在一起，形成更加复杂的表单布局。通过使用输入框组，我们可以轻松地实现以下功能：

• 将输入框与标签、说明文字、按钮等元素组合在一起。
• 为输入框添加边框和背景色，以突出显示表单元素。
• 使用输入框组提供的前后缀来增强输入框的视觉效果。

二、输入框组的基本结构

一个基本的输入框组由以下元素组成：

• .form-group：为输入框组添加必要的样式和间距。
• .form-control：应用于输入框，为其提供样式和宽度。
• .form-label：用于显示输入框的标签，通常位于输入框上方。
• .form-text：用于显示输入框的说明文字，通常位于输入框下方。

以下是一个简单的输入框组示例：

<div class="form-group">
  <label for="exampleInputEmail1" class="form-label">Email address</label>
  <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="ema