输入框组 - AuxUI - 模块化前端UI框架

通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .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="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://auxui.aimlt.com/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

尺寸

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

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

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

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

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div>
  </div>
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div>
  </div>
</div>

作为额外元素的按钮

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

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div>
  </div>
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div>
  </div>
</div>

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

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">弹出菜单 <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">菜单1</a></li>
          <li><a href="#">菜单2</a></li>
          <li><a href="#">菜单3</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">菜单4</a></li>
        </ul>
      </div>
      <input type="text" class="form-control" aria-label="...">
    </div>
  </div>
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">弹出菜单 <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">菜单1</a></li>
          <li><a href="#">菜单2</a></li>
          <li><a href="#">菜单3</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">菜单4</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

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

<div class="row">
    <div class="col-lg-6">
        <div class="input-group">
            <div class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">弹出菜单 <span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">菜单1</a></li>
                  <li><a href="#">菜单2</a></li>
                  <li><a href="#">菜单3</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">菜单4</a></li>
                </ul>
            </div>
            <input type="text" class="form-control" aria-label="Text input with dropdown button">
        </div>
    </div>

    <div class="col-lg-6">
        <div class="input-group">
            <input type="text" class="form-control" aria-label="Text input with dropdown button">
            <div class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">弹出菜单 <span class="caret"></span></button>
                <ul class="dropdown-menu dropdown-menu-right">
                  <li><a href="#">菜单1</a></li>
                  <li><a href="#">菜单2</a></li>
                  <li><a href="#">菜单3</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">菜单4</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

多按钮

<div class="row">
    <div class="col-lg-6">
        <div class="input-group">
            <div class="input-group-btn">
                <button type="button" class="btn btn-default" aria-label="Bold">B</button>
                <button type="button" class="btn btn-default" aria-label="Italic">C</button>
            </div>
            <input type="text" class="form-control" aria-label="Text input with multiple buttons">
        </div>
    </div>

    <div class="col-lg-6">
        <div class="input-group">
            <input type="text" class="form-control" aria-label="Text input with multiple buttons">
            <div class="input-group-btn">
                <button type="button" class="btn btn-default" aria-label="Help">+</button>
                <button type="button" class="btn btn-default">按钮</button>
            </div>
        </div>
    </div>
</div>