Bootstrap 5 输入框组

基础输入框组

使用.input-group、.input-group-text和.form-control类创建基础输入框组。

基础输入框组示例

@

@example.com

$ .00

<!-- 前缀 -->
<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="用户名">
</div>

<!-- 后缀 -->
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="收件人用户名">
  <span class="input-group-text">@example.com</span>
</div>

<!-- 前后缀 -->
<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  <input type="text" class="form-control">
  <span class="input-group-text">.00</span>
</div>

尺寸调整

使用.input-group-sm或.input-group-lg类调整输入框组的尺寸。

不同尺寸的输入框组示例

小尺寸

默认尺寸

大尺寸

<!-- 小尺寸 -->
<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 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>
  <span class="input-group-text">
    <input class="form-check-input mt-0" type="checkbox">
  </span>
  <input type="text" class="form-control">
</div>

<!-- 多个后缀 -->
<div class="input-group mb-3">
  <input type="text" class="form-control">
  <span class="input-group-text">
    <input class="form-check-input mt-0" type="radio">
  </span>
  <span class="input-group-text">选项</span>
</div>

按钮输入框组

在输入框组中添加按钮。

按钮输入框组示例

<!-- 前缀按钮 -->
<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button">按钮</button>
  <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-primary" type="button">搜索</button>
</div>

<!-- 前后按钮 -->
<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button">选项</button>
  <input type="text" class="form-control">
  <button class="btn btn-success" type="button">提交</button>
</div>

下拉菜单输入框组

在输入框组中添加下拉菜单。

下拉菜单输入框组示例

<!-- 前缀下拉菜单 -->
<div class="input-group mb-3">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    下拉菜单
  </button>
  <ul class="dropdown-menu">
    <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>
  <input type="text" class="form-control">
</div>

<!-- 后缀下拉菜单 -->
<div class="input-group mb-3">
  <input type="text" class="form-control">
  <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>

复选框和单选框

在输入框组中添加复选框或单选框。

复选框和单选框输入框组示例

<!-- 前缀复选框 -->
<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">
</div>

<!-- 前缀单选框 -->
<div class="input-group mb-3">
  <div class="input-group-text">
    <input class="form-check-input mt-0" type="radio">
  </div>
  <input type="text" class="form-control">
</div>

<!-- 后缀复选框 -->
<div class="input-group mb-3">
  <input type="text" class="form-control">
  <div class="input-group-text">
    <input class="form-check-input mt-0" type="checkbox">
  </div>
</div>

<!-- 后缀单选框 -->
<div class="input-group mb-3">
  <input type="text" class="form-control">
  <div class="input-group-text">
    <input class="form-check-input mt-0" type="radio">
  </div>
</div>

多个输入框

在输入框组中添加多个输入框。

多个输入框示例

姓名

地址

<!-- 多个输入框 -->
<div class="input-group mb-3">
  <span class="input-group-text">姓名</span>
  <input type="text" aria-label="名字" class="form-control" placeholder="名字">
  <input type="text" aria-label="姓氏" class="form-control" placeholder="姓氏">
</div>

<!-- 多个输入框和后缀 -->
<div class="input-group mb-3">
  <input type="text" aria-label="名字" class="form-control" placeholder="名字">
  <input type="text" aria-label="姓氏" class="form-control" placeholder="姓氏">
  <span class="input-group-text">姓名</span>
</div>

<!-- 多个输入框和前缀 -->
<div class="input-group mb-3">
  <span class="input-group-text">地址</span>
  <input type="text" aria-label="街道" class="form-control" placeholder="街道">
  <input type="text" aria-label="城市" class="form-control" placeholder="城市">
  <input type="text" aria-label="邮编" class="form-control" placeholder="邮编">
</div>

自定义样式

使用自定义CSS为输入框组添加独特的样式。

自定义样式输入框组示例

自定义

<!-- 自定义样式 -->
<div class="input-group mb-3 custom-input-group">
  <span class="input-group-text">自定义</span>
  <input type="text" class="form-control" placeholder="自定义输入框组">
</div>

<!-- 成功状态 -->
<div class="input-group mb-3">
  <span class="input-group-text bg-success text-white">
    <i class="bi bi-check-circle"></i>
  </span>
  <input type="text" class="form-control border-success" placeholder="成功状态">
</div>

<!-- 错误状态 -->
<div class="input-group mb-3">
  <span class="input-group-text bg-danger text-white">
    <i class="bi bi-exclamation-triangle"></i>
  </span>
  <input type="text" class="form-control border-danger" placeholder="错误状态">
</div>

<!-- CSS -->
<style>
.custom-input-group .input-group-text {
    background-color: #6f42c1;
    color: white;
    border-color: #6f42c1;
}

.custom-input-group .form-control {
    border-color: #6f42c1;
}

.custom-input-group .form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.25);
    border-color: #6f42c1;
}
</style>

实际应用示例

在实际项目中使用输入框组的示例。

搜索表单示例

搜索表单

关键词搜索

高级搜索

关键词

价格范围

$ - .00

<div class="form-container">
  <h5 class="mb-4">搜索表单</h5>

  <div class="mb-3">
    <label class="form-label">关键词搜索</label>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="输入关键词...">
      <button class="btn btn-primary" type="button">搜索</button>
    </div>
  </div>

  <div class="mb-3">
    <label class="form-label">高级搜索</label>
    <div class="input-group">
      <span class="input-group-text">关键词</span>
      <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">
        <li><a class="dropdown-item" href="#">精确匹配</a></li>
        <li><a class="dropdown-item" href="#">模糊匹配</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">高级选项</a></li>
      </ul>
    </div>
  </div>

  <div class="mb-3">
    <label class="form-label">价格范围</label>
    <div class="input-group">
      <span class="input-group-text">$</span>
      <input type="text" class="form-control" placeholder="最低价">
      <span class="input-group-text">-</span>
      <input type="text" class="form-control" placeholder="最高价">
      <span class="input-group-text">.00</span>
    </div>
  </div>

  <button class="btn btn-success w-100 mt-3">开始搜索</button>
</div>

注册表单示例

用户注册

用户名

@ .com

邮箱地址

@

密码

确认密码

<div class="form-container">
  <h5 class="mb-4">用户注册</h5>

  <div class="mb-3">
    <label class="form-label">用户名</label>
    <div class="input-group">
      <span class="input-group-text">@</span>
      <input type="text" class="form-control" placeholder="用户名">
      <span class="input-group-text">.com</span>
    </div>
  </div>

  <div class="mb-3">
    <label class="form-label">邮箱地址</label>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="用户名">
      <span class="input-group-text">@</span>
      <input type="text" class="form-control" placeholder="example.com">
    </div>
  </div>

  <div class="mb-3">
    <label class="form-label">密码</label>
    <div class="input-group">
      <input type="password" class="form-control" placeholder="密码">
      <button class="btn btn-outline-secondary" type="button">
        <i class="bi bi-eye"></i>
      </button>
    </div>
  </div>

  <div class="mb-3">
    <label class="form-label">确认密码</label>
    <div class="input-group">
      <input type="password" class="form-control" placeholder="确认密码">
      <button class="btn btn-outline-secondary" type="button">
        <i class="bi bi-eye"></i>
      </button>
    </div>
  </div>

  <div class="mb-3">
    <div class="input-group">
      <div class="input-group-text">
        <input class="form-check-input mt-0" type="checkbox">
      </div>
      <input type="text" class="form-control" value="我已阅读并同意服务条款" readonly>
    </div>
  </div>

  <button class="btn btn-primary w-100 mt-3">注册账户</button>
</div>

Bootstrap5教程

Bootstrap5 输入框组