Bootstrap - 输入组：初学者的友好指南
你好，未来的网页开发者们！我很高兴能成为你们在这个激动人心的旅程中的向导，我们将一起学习Bootstrap的输入组。作为一位有着多年计算机科学教学经验的老师，我见证了无数学生在掌握了这些概念后的兴奋。那么，让我们开始吧，让你们的网页表单看起来更加出色！
输入组是什么？
在我们开始之前，想象你正在为一个披萨快递服务设计表单。你需要客户的姓名、地址，当然还有非常重要的披萨配料字段。输入组就像是让这些表单元素看起来协调和专业的秘密酱汁。
在Bootstrap中，输入组允许你向表单控件添加前缀、后缀或其他元素。它们提升了表单的视觉吸引力和功能性，使它们更加用户友好和直观。
示例：基本输入组
让我们从一个简单的示例开始：
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="用户名">
</div>在这段代码中：
- 我们创建了一个带有
input-group类的容器。 -
mb-3类在底部添加了一些边距。 - 我们使用
input-group-text为 '@' 符号添加前缀。 - 输入字段使用
form-control类进行样式设置。
这创建了一个时尚的输入字段，带有 '@' 符号，非常适合输入用户名或电子邮件地址！
包装
有时候，你的输入组可能在一行中太长了。别担心，Bootstrap提供了自动包装功能。
示例：包装输入组
<div class="input-group flex-nowrap">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="用户名">
<span class="input-group-text">.com</span>
</div>在这里，我们向输入组添加了 flex-nowrap。这确保了如果可能的话，所有元素都保持在同一行，但如果屏幕太窄，它们会很好地包装。
大小
就像金发女孩一样，有时候你需要输入组的大小刚刚好。Bootstrap提供了不同的尺寸选项来满足你的需求。
示例：不同尺寸的输入组
<div class="input-group input-group-sm mb-3">
<span class="input-group-text">小型</span>
<input type="text" class="form-control">
</div>
<div class="input-group mb-3">
<span class="input-group-text">默认</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-lg">
<span class="input-group-text">大型</span>
<input type="text" class="form-control">
</div>通过添加 input-group-sm 或 input-group-lg，你可以创建小型或大型的输入组。默认大小不需要任何额外的类。
复选框和单选按钮
有时候，简单的文本输入是不够的。你可能想要在输入组中添加复选框或单选按钮。让我们看看如何操作！
示例：复选框在输入组中
<div class="input-group mb-3">
<div class="input-group-text">
<input class="form-check-input mt-0" type="checkbox">
</div>
<input type="text" class="form-control" placeholder="在这里勾选">
</div>在这个示例中，我们在 input-group-text div 中嵌入了复选框。form-check-input 类为我们的复选框设置样式，而 mt-0 移除了顶部边距。
多个输入
为什么只满足一个输入，当你可以拥有多个呢？让我们创建一个包含多个字段的输入组。
示例：多个输入
<div class="input-group">
<span class="input-group-text">名字和姓氏</span>
<input type="text" class="form-control" placeholder="名字">
<input type="text" class="form-control" placeholder="姓氏">
</div>这创建了两个并排的输入字段，非常适合收集用户的完整姓名！
按钮插件
按钮可以增加输入组的互动性。让我们看看如何将它们整合在一起。
示例：按钮插件
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="收件人用户名">
<button class="btn btn-outline-secondary" type="button">按钮</button>
</div>在这里，我们在输入字段旁边添加了一个按钮。这可以用于提交表单或触发搜索等操作。
带下拉菜单的按钮
想要给用户更多选项吗？让我们在按钮插件中添加一个下拉菜单。
示例：带下拉菜单的按钮
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="搜索...">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
选项
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">操作</a></li>
<li><a class="dropdown-item" href="#">另一个操作</a></li>
<li><a class="dropdown-item" href="#">这里还有其他东西</a></li>
</ul>
</div>这创建了一个带下拉菜单的按钮，紧邻输入字段，为用户提供了额外的选项。
自定义表单
Bootstrap还允许你在输入组中创建自定义表单元素。让我们看看一个自定义选择示例。
示例：自定义选择
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">选项</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>选择...</option>
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
</select>
</div>这创建了一个自定义的下拉选择菜单，与Bootstrap的其他元素保持一致的样式。
自定义文件输入
最后但同样重要的是，让我们看看如何在输入组中创建自定义文件输入。
示例：自定义文件输入
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupFile01">上传</label>
<input type="file" class="form-control" id="inputGroupFile01">
</div>这创建了一个时尚的文件输入字段，非常适合允许用户通过表单上传文件。
结论
好了，各位！我们一起穿越了Bootstrap输入组的世界，从基本示例到更复杂的配置。记住，掌握这些概念的关键是实践。尝试组合不同的元素，玩转大小和样式，最重要的是，享受其中的乐趣！
在我们结束之前，我想起了一个学生曾经对我说：“Bootstrap就像网页设计的乐高！”而你知道吗？他们完全正确。你现在有了所有这些美好的积木 - 是时候建造一些惊人的东西了！
快乐编码，愿你的表单永远用户友好且视觉吸引人！
Credits: Image by storyset