Bootstrap 5学习教程，从入门到精通，Bootstrap 5 输入框组（Input Group）知识点及案例代码（32）

发布于：2025-07-08 ⋅ 阅读:(11) ⋅ 点赞:(0)

Bootstrap 5 输入框组（Input Group）知识点及案例代码

输入框组（Input Group） 是 Bootstrap 5 中用于在输入框前后添加文本、图标或按钮的组件。通过输入框组，可以增强表单的可读性和用户体验。

一、语法知识点

1. 基本结构

输入框组的基本结构由以下几个类组成：

  • .input-group：包裹整个输入框组的容器。
  • .input-group-prepend：用于在输入框前添加内容。
  • .input-group-append：用于在输入框后添加内容。
  • .input-group-text：用于包裹文本内容，如标签或图标。
  • <input>：标准的输入框元素。

2. 常用类

  • .input-group-sm：小型输入框组。
  • .input-group-lg：大型输入框组。
  • .input-group-prepend 和 .input-group-append 可以同时使用，以在输入框前后添加内容。
  • .input-group 支持多个输入框，通过在 .input-group 内添加多个 <input> 元素实现。

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="#">操作 1</a>
      <a class="dropdown-item" href="#">操作 2</a>
      <a class="dropdown-item" href="#">操作 3</a>
    </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>
  <!-- 引入 Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- 引入 Bootstrap 5 JS（可选，用于下拉菜单等交互功能） -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/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>

  <!-- 1. 基本输入框组 -->
  <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>

  <!-- 2. 输入框组前添加按钮 -->
  <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>

  <!-- 3. 输入框组后添加按钮 -->
  <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>

  <!-- 4. 输入框组前后都添加内容 -->
  <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">.00</span>
  </div>

  <!-- 5. 输入框组中添加下拉菜单 -->
  <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="#">选项 1</a></li>
        <li><a class="dropdown-item" href="#">选项 2</a></li>
        <li><a class="dropdown-item" href="#">选项 3</a></li>
      </ul>
    </div>
    <input type="text" class="form-control" placeholder="请选择选项" aria-label="选择选项">
  </div>

  <!-- 6. 输入框组中添加多个输入框 -->
  <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>

  <!-- 7. 大型输入框组 -->
  <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>

  <!-- 8. 小型输入框组 -->
  <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>

  <!-- 9. 自定义样式 -->
  <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>

  <!-- 10. 输入框组中包含图标 -->
  <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>

代码说明

  1. 引入 Bootstrap 5 CSS 和 JS：

    • 使用 CDN 引入 Bootstrap 5 的 CSS 和 JavaScript（Bootstrap Bundle JS 包含 Popper.js，用于下拉菜单等交互功能）。

  2. 自定义样式：

    • 通过 .custom-input-group 类，为特定输入框组添加自定义样式，如背景颜色和边框颜色。

  3. 案例 1 至 10：

    • 案例 1：基本输入框组，在输入框前添加文本内容。
    • 案例 2：在输入框前添加按钮。
    • 案例 3：在输入框后添加按钮。
    • 案例 4：在输入框前后都添加文本内容。
    • 案例 5：在输入框组中添加下拉菜单。
    • 案例 6：输入框组中包含多个输入框。
    • 案例 7 和 8：调整输入框组的大小，分别使用 .input-group-lg 和 .input-group-sm。
    • 案例 9：应用自定义样式。
    • 案例 10：在输入框组中添加图标。

  4. 响应式设计：

    • 所有输入框组均采用 Bootstrap 的响应式设计，能够在不同设备上自适应。

  5. 可访问性：

    • 使用 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>

确保在项目中引入了相应的图标库。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布