Bootstrap输入框组

通过在文本输入框 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 或 .input-group-btn 类，可以给 .form-control 的前面或后面添加额外的元素。

---

基本实例

在输入框的任意一侧添加额外元素或按钮。你还可以在输入框的两侧同时添加额外元素。
我们不支持在输入框的单独一侧添加多个额外元素（.input-group-addon 或 .input-group-btn）。
我们不支持在单个输入框组中添加多个表单控件。

    <div class="input-group">
      <span class="input-group-addon" id="basic-addon1">中国</span>
      <input type="text" class="form-control" placeholder="请输入城市" aria-describedby="basic-addon1" >
    </div>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="请输入qq号" aria-describedby="basic-addon2" >
      <span class="input-group-addon" id="basic-addon2">@qq.com</span>
    </div>  
    <div class="input-group">
      <span class="input-group-addon">$</span>
      <input type="text" class="form-control" placeholder="请输入价格" aria-describedby="basic-addon1" >
      <span class="input-group-addon">.00</span>
    </div>

---

尺寸

为 .input-group 添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸。不需要为输入框组中的每个元素重复地添加控制尺寸的类。
input-group-lg、input-group-sm等

    <div class="input-group input-group-lg">
      <span class="input-group-addon" id="basic-addon1">中国</span>
      <input type="text" class="form-control" placeholder="请输入城市" aria-describedby="basic-addon1" >
    </div>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="请输入qq号" aria-describedby="basic-addon2" >
      <span class="input-group-addon" id="basic-addon2">@qq.com</span>
    </div>  
    <div class="input-group input-group-sm">
      <span class="input-group-addon">$</span>
      <input type="text" class="form-control" placeholder="请输入价格" aria-describedby="basic-addon1" >
      <span class="input-group-addon">.00</span>
    </div>
</div>  

---

作为额外元素的多选框和单选框

可以将多选框或单选框作为额外元素添加到输入框组中。

    <div class="input-group">
      <span class="input-group-addon"><input type="checkbox"></span>
      <input type="text" class="form-control" placeholder="请输入城市">
    </div> 
    <div class="input-group">
      <span class="input-group-addon"><input type="radio"></span>
      <input type="text" class="form-control" placeholder="请输入城市">
    </div>

---

作为额外元素添加按钮

为输入框组添加按钮需要额外添加一层嵌套，不是 .input-group-addon，而是添加 .input-group-btn 来包裹按钮元素。由于不同浏览器的默认样式无法被统一的重新赋值，所以才需要这样做。

    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn"><button class="btn btn-info" type="button">百度一下</button></span>
    </div> 

---

作为额外元素的分裂式按钮下拉菜单

<div class="input-group">
      <input type="text" class="form-control">
      <div class="input-group-btn">
        <button type="button" class="btn btn-info">百度一下</button>
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li>百度</li>
          <li>360搜索</li>
          <li>搜狗</li>
        </ul>
    </div>
  </div>