Bootstrap 5学习教程，从入门到精通，Bootstrap 5 输入框组（Input Group）知识点及案例代码（32）
Bootstrap 5 输入框组（Input Group）知识点及案例代码
输入框组（Input Group） 是 Bootstrap 5 中用于在输入框前后添加文本、图标或按钮的组件。通过输入框组，可以增强表单的可读性和用户体验。
一、语法知识点
1. 基本结构
输入框组的基本结构由以下几个类组成：
.input-group：包裹整个输入框组的容器。.input-group-prepend：用于在输入框前添加内容。.input-group-append：用于在输入框后添加内容。.input-group-text：用于包裹文本内容，如标签或图标。：标准的输入框元素。
2. 常用类
.input-group-sm：小型输入框组。.input-group-lg：大型输入框组。.input-group-prepend和.input-group-append可以同时使用，以在输入框前后添加内容。.input-group支持多个输入框，通过在.input-group内添加多个元素实现。
3. 添加按钮
在输入框组中添加按钮，可以使用 .btn 类：
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">按钮button>
div>
<input type="text" class="form-control" placeholder="请输入内容">
div>
4. 添加下拉菜单
可以在输入框组中添加下拉菜单，使用 .dropdown 组件：
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
操作
button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">操作 1a>
<a class="dropdown-item" href="#">操作 2a>
<a class="dropdown-item" href="#">操作 3a>
div>
div>
<input type="text" class="form-control" placeholder="请选择操作">
div>
5. 尺寸调整
通过添加 .input-group-sm 或 .input-group-lg 类，可以调整输入框组的大小：
<div class="input-group input-group-sm">
div>
<div class="input-group input-group-lg">
div>
6. 多输入框支持
一个输入框组内可以包含多个输入框：
<div class="input-group">
<input type="text" class="form-control" placeholder="用户名">
<input type="password" class="form-control" placeholder="密码">
<div class="input-group-append">
<button class="btn btn-primary" type="button">登录button>
div>
div>
7. 响应式设计
Bootstrap 5 的输入框组支持响应式设计，可以通过添加 .input-group-responsive 类，使输入框组在不同设备上自适应宽度。
二、案例代码
以下是一个综合性的输入框组案例，包含文本、按钮、下拉菜单以及尺寸调整，并附有详细注释。
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Bootstrap 5 输入框组案例title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">script>
<style>
/* 自定义样式（可选） */
.custom-input-group .input-group-text {
background-color: #f8f9fa;
border-color: #dee2e6;
}
style>
head>
<body>
<div class="container my-5">
<h2 class="mb-4">Bootstrap 5 输入框组案例h2>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">@span>
<input type="text" class="form-control" placeholder="用户名" aria-label="用户名" aria-describedby="basic-addon1">
div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">搜索button>
div>
<input type="text" class="form-control" placeholder="请输入搜索内容" aria-label="搜索内容">
div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="请输入内容" aria-label="输入内容">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">提交button>
div>
div>
<div class="input-group mb-3">
<span class="input-group-text">$span>
<input type="text" class="form-control" aria-label="金额">
<span class="input-group-text">.00span>
div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
选择选项
button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">选项 1a>li>
<li><a class="dropdown-item" href="#">选项 2a>li>
<li><a class="dropdown-item" href="#">选项 3a>li>
ul>
div>
<input type="text" class="form-control" placeholder="请选择选项" aria-label="选择选项">
div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="姓氏" aria-label="姓氏">
<input type="text" class="form-control" placeholder="名字" aria-label="名字">
<div class="input-group-append">
<button class="btn btn-primary" type="button">提交button>
div>
div>
<div class="input-group input-group-lg mb-3">
<span class="input-group-text">@span>
<input type="text" class="form-control" placeholder="用户名" aria-label="用户名">
div>
<div class="input-group input-group-sm mb-3">
<span class="input-group-text">@span>
<input type="text" class="form-control" placeholder="用户名" aria-label="用户名">
div>
<div class="input-group mb-3 custom-input-group">
<span class="input-group-text">自定义样式span>
<input type="text" class="form-control" placeholder="请输入内容" aria-label="请输入内容">
div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
<path d="M0 4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V4Zm7-1a2 2 0 0 1 2 2v.1c0 .425.91 1.154 2 1.618V4a2 2 0 0 1-2-2H1Zm4.12 4.12a.998.998 0 0 0 .785-.641l6.92-5.799a.926.926 0 0 0-.231-.62L9.12 4.73a.998.998 0 0 0-.785.641Zm-6.32 1.117a1.06 1.06 0 0 1 .785-.641L.64 10.457a1.06 1.06 0 0 1-.785.641Zm5.56 1.485a.926.926 0 0 0-.231-.62L1.27 7.27a.998.998 0 0 0-.785.641l6.92-5.799a.926.926 0 0 0 .231-.62Zm4.12 4.12a.998.998 0 0 0 .785-.641l6.92-5.799a.926.926 0 0 0-.231-.62L9.12 4.73a.998.998 0 0 0-.785.641Z"/>
svg>
span>
div>
<input type="email" class="form-control" placeholder="邮箱" aria-label="邮箱">
div>
div>
body>
html>
代码说明
-
引入 Bootstrap 5 CSS 和 JS：
- 使用 CDN 引入 Bootstrap 5 的 CSS 和 JavaScript（Bootstrap Bundle JS 包含 Popper.js，用于下拉菜单等交互功能）。
-
自定义样式：
- 通过
.custom-input-group类，为特定输入框组添加自定义样式，如背景颜色和边框颜色。
- 通过
-
案例 1 至 10：
- 案例 1：基本输入框组，在输入框前添加文本内容。
- 案例 2：在输入框前添加按钮。
- 案例 3：在输入框后添加按钮。
- 案例 4：在输入框前后都添加文本内容。
- 案例 5：在输入框组中添加下拉菜单。
- 案例 6：输入框组中包含多个输入框。
- 案例 7 和 8：调整输入框组的大小，分别使用
.input-group-lg和.input-group-sm。 - 案例 9：应用自定义样式。
- 案例 10：在输入框组中添加图标。
-
响应式设计：
- 所有输入框组均采用 Bootstrap 的响应式设计，能够在不同设备上自适应。
-
可访问性：
- 使用
aria-label和aria-describedby属性，提高表单的可访问性。
- 使用
运行效果
将上述代码保存为一个 .html 文件，并在浏览器中打开，即可查看各种输入框组的样式和功能。
三、扩展功能
1. 验证状态
可以通过添加 Bootstrap 的验证类（如 .is-valid 或 .is-invalid）来显示输入框的验证状态：
<div class="input-group mb-3">
<span class="input-group-text">@span>
<input type="text" class="form-control is-invalid" placeholder="用户名" aria-label="用户名">
<div class="invalid-feedback">
请输入有效的用户名。
div>
div>
2. 表单布局
结合 Bootstrap 的网格系统，可以将输入框组与其他表单元素组合使用：
<div class="container">
<form>
<div class="row">
<div class="col-md-6">
<div class="input-group mb-3">
<span class="input-group-text">@span>
<input type="text" class="form-control" placeholder="用户名" aria-label="用户名">
div>
div>
<div class="col-md-6">
<div class="input-group mb-3">
<input type="password" class="form-control" placeholder="密码" aria-label="密码">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">显示密码button>
div>
div>
div>
div>
<button type="submit" class="btn btn-primary">登录button>
form>
div>
3. 使用图标库
可以结合 Font Awesome 或其他图标库，在输入框组中添加图标：
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-user">i>
span>
div>
<input type="text" class="form-control" placeholder="用户名" aria-label="用户名">
div>
确保在项目中引入了相应的图标库。