Bootstrap 输入框组

输入框组把文本框与前置/后置内容拼成一个整体，如金额前的"￥"、邮箱后的"@example.com"、搜索框内的按钮。它比在文本框外另放元素更整齐，宽度也自动适配。

文本前后缀 input-group-addon

input-group 是容器，input 加 form-control，前缀或后缀用带 input-group-addon 的 span，左右两端可同时存在。

<div class="input-group">
  <span class="input-group-addon">￥</span>
  <input type="text" class="form-control" placeholder="请输入金额">
  <span class="input-group-addon">.00</span>
</div>
<!-- 效果：输入框左侧显示￥、右侧显示.00，三者拼成一个整体 -->

复选框与单选作前后缀

addon 里也能放复选框或单选框，常用于"同意协议""是否启用"这类带勾选的输入。

<div class="input-group">
  <span class="input-group-addon"><input type="checkbox"></span>
  <input type="text" class="form-control" placeholder="勾选后输入">
</div>
<!-- 效果：输入框左侧出现一个内嵌复选框的灰色方块 -->

按钮前后缀 input-group-btn

把 addon 换成带 input-group-btn 的容器并放入 button，就能做出"输入 + 按钮"的组合，如搜索框、验证码输入框。

<div class="input-group">
  <input type="text" class="form-control" placeholder="请输入关键词">
  <span class="input-group-btn">
    <button class="btn btn-primary" type="button">
      <span class="glyphicon glyphicon-search"></span> 搜索
    </button>
  </span>
</div>
<!-- 效果：输入框右侧紧贴一个蓝色搜索按钮，按钮与输入框同高 -->

尺寸与局限

input-group-lg、input-group-sm 整体改变组内元素尺寸，省去逐个调整。

<div class="input-group input-group-lg">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="用户名">
</div>
<!-- 效果：整组元素明显放大，适合作为页面主搜索入口 -->

局限提醒：输入框组只支持 text、password、email、date 等文本类 input，select 与 textarea 不能直接放进组内。

小结

输入框组 = input-group 容器 + form-control 输入框 + addon 或 btn 前后缀，三行结构即可拼出搜索框、金额框等高频组件。