Bootstrap 5 提供了丰富的输入组组件，允许你在表单元素周围添加额外的元素，如按钮或文本。这种组合使得创建复杂的输入控件变得非常简单。本章将详细介绍如何使用 Bootstrap 的输入组组件来增强你的表单设计。
输入组的基本结构
输入组的基本结构由一个基础的 <div class="input-group"> 容器组成，其中可以包含一个 <input> 元素和一个或多个辅助元素，如按钮、下拉菜单等。
<div class="input-group"> <span class="input-group-text">@</span> <input type="text" class="form-control" placeholder="Username" aria-label="Username"> </div>
在这个例子中，我们使用了一个 input-group-text 类来创建一个文本标签，并将其放在输入框之前。
在输入组中添加按钮
输入组可以方便地与按钮结合，从而提供更多的交互功能。按钮可以放置在输入组的前面或后面。
按钮在输入组的前面
<div class="input-group"> <button class="btn btn-outline-secondary" type="button">Go!</button> <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons"> </div>
按钮在输入组的后面
<div class="input-group"> <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons"> <button class="btn btn-outline-secondary" type="button">Go!</button> </div>
使用下拉菜单
除了按钮之外，你还可以在输入组中添加下拉菜单，这为用户提供了更多选择的可能性。
下拉菜单在输入组的前面
-- -------------------- ---- -------
---- --------------------
---- -------------------------
------- --------------------
------- ------------------------
------- ------------------------
---------
------
------ ----------- -------------------- ---------------- ----- ---- -------- --------
------下拉菜单在输入组的后面
-- -------------------- ---- -------
---- --------------------
------ ----------- -------------------- ---------------- ----- ---- -------- --------
---- -------------------------
------- --------------------
------- ------------------------
------- ------------------------
---------
------
------自定义大小
你可以通过添加 .input-group-sm 或 .input-group-lg 类来调整输入组中所有元素的大小。
小型输入组
<div class="input-group input-group-sm"> <input type="text" class="form-control" placeholder=".input-group-sm .form-control-sm" aria-label="Small"> <button class="btn btn-outline-secondary" type="button">Button</button> </div>
大型输入组
<div class="input-group input-group-lg"> <input type="text" class="form-control" placeholder=".input-group-lg .form-control-lg" aria-label="Large"> <button class="btn btn-outline-secondary" type="button">Button</button> </div>
输入组中的其他元素
除了按钮和下拉菜单，你还可以向输入组中添加其他元素，如文本标签、图标等。
<div class="input-group"> <span class="input-group-text"><i class="bi bi-envelope-fill"></i></span> <input type="email" class="form-control" placeholder="Email Address"> </div>
输入组的响应式断点
Bootstrap 的输入组是响应式的，这意味着你可以利用不同的断点类（如 .input-group-sm, .input-group-lg）来调整不同屏幕尺寸下的样式。
-- -------------------- ---- ------- ---- ------------------ ------ ------ ----------- -------------------- -------------------- ------ ------------------- ------- ------- ---------- ------------ ----------------------------- ------ ---- ------------------ ------ ------ ----------- ------------------- ---------------- ------------------ ------ ----------------- ------- ------- ---------- ------------ ----------------------------- ------ ---- ------------------ ------ ------ ----------- ------------------- ---------------- ------------------ ------ ----------------- ------- ------- ---------- ------------ ----------------------------- ------
以上便是 Bootstrap 5 中输入组组件的详细介绍。通过合理运用这些功能，你可以大大提升你的表单界面设计能力，使其更加美观且易于使用。