Bootstrap 输入框组
Bootstrap是一个流行的前端框架，提供了若干组件，其中输入框组（Input Group）是一种常见组件，在输入框左右可以添加预定义的文本、按钮等元素。这份文档将详细介绍Bootstrap输入框组的用法和示例。
基本使用
使用Bootstrap的输入框组需要先引入相应的CSS和JavaScript文件，可以从官方网站下载或使用在线CDN。比如以下代码可以引入Bootstrap 5的CSS和JavaScript：
<!-- 引入CSS文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<!-- 引入JavaScript文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
然后就可以开始使用输入框组。输入框组通常由一个带有类名input-group的父元素包裹住输入框、添加的元素等。以下是一个简单的输入框组示例：
<div class="input-group">
<input type="text" class="form-control" placeholder="输入文字...">
<button class="btn btn-outline-secondary" type="button">搜索</button>
</div>
这个输入框组包含一个文本框和一个按钮，可以用于搜索。其中，form-control类用于设置输入框的样式，btn类用于设置按钮的样式。btn-outline-secondary类表示一个带边框的次要按钮。
输入框组样式
输入框组支持多种样式，包括大小、颜色、形状等。可以通过给父元素添加不同的类名来设置样式。以下是常用的样式类和效果示例：
大小
输入框组可以设置为小、中等、大等多种尺寸。使用input-group-sm、input-group（中等尺寸，可以省略）和input-group-lg类来设置大小。
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="小尺寸">
<button class="btn btn-outline-secondary" type="button">按钮</button>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="中等尺寸">
<button class="btn btn-outline-secondary" type="button">按钮</button>
</div>
<div class="input-group input-group-lg">
<input type="text" class="form-control" placeholder="大尺寸">
<button class="btn btn-outline-secondary" type="button">按钮</button>
</div>
颜色
输入框组可以根据不同的主题颜色设置为不同的颜色。可以使用bg-*、text-*等类来设置颜色。其中，bg-*类用于设置背景颜色，text-*类用于设置文本颜色。以下是一些示例：
<div class="input-group bg-primary">
<input type="text" class="form-control" placeholder="背景颜色">
<button class="btn btn-light" type="button">按钮</button>
</div>
<div class="input-group">
<span class="input-group-text bg-danger text-light">@</span>
<input type="text" class="form-control" placeholder="图标和文本颜色">
</div>
这个示例演示了如何添加圆角边框，可以设置rounded-start和rounded-end类来分别设置左右的圆角。
嵌套输入框组
输入框组还支持嵌套，可以在一个输入框组中添加另一个输入框组。以下是一个示例：
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">提交</button>
</div>
</div>
这个示例中，输入框组的左边是个带美元符号的文本元素，右边是个提交按钮。
总结
本文介绍了Bootstrap输入框组的用法和示例。通过添加父元素的类名，可以设置输入框组的大小、颜色、形状等样式，使其更加灵活多样。同时，输入框组还支持添加预定义的元素，支持嵌套，能够满足各种输入框需求。