在本教程中，我们将学习Bootstrap中的输入组。

我们可以通过在任何基于文本的" <input>"之前，之后和两侧添加按钮和文本来扩展表单控件。

Addon

我们可以使用.input-group-addon类将插件添加到基于文本的输入字段中。

<div class="input-group">
  <span class="input-group-addon" 
        id="basic-addon"><@/span>
  <input type="text" 
         class="form-control" 
         placeholder="Enter your twitter handle"
         aria-describedby="basic-addon">
</div>

<div class="input-group">
  <input type="text" 
         class="form-control" 
         placeholder="Enter your email address"
         aria-describedby="basic-addon">
  <span class="input-group-addon" 
        id="basic-addon">@gmail.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">INR</span>
  <input type="text"
         class="form-control"
         placeholder="Amount in Indian Rupee"
         aria-label="Amount (to the nearest Indian Rupee)">
  <span class="input-group-addon">.00</span>
</div>

大小

我们可以使用.input-group-lg和.input-group-sm类来更改输入组插件的大小。

<!-- large size -->
<div class="input-group input-group-lg">
  <span class="input-group-addon"
        id="sizing-addon"><@/span>
  <input type="text"
         class="form-control"
         placeholder="Enter your twitter handle"
         aria-describedby="sizing-addon">
</div>

<!-- default size -->
<div class="input-group">
  <span class="input-group-addon"
        id="sizing-addon"><@/span>
  <input type="text"
         class="form-control"
         placeholder="Enter your twitter handle"
         aria-describedby="sizing-addon">
</div>

<!-- small size -->
<div class="input-group input-group-sm">
  <span class="input-group-addon"
        id="sizing-addon"><@/span>
  <input type="text"
         class="form-control"
         placeholder="Enter your twitter handle"
         aria-describedby="sizing-addon">
</div>

复选框插件

我们可以将复选框作为插件添加到文本输入字段。

<div class="input-group">
  <span class="input-group-addon">
    <input type="checkbox" 
           aria-label="checkbox">
  </span>
  <input type="text" 
         class="form-control" 
         aria-label="text input"
         placeholder="Enter some text...">
</div>

单选框插件

我们可以将radio作为插件添加到文本输入字段。

<div class="input-group">
  <span class="input-group-addon">
    <input type="radio" 
           aria-label="radio">
  </span>
  <input type="text" 
         class="form-control" 
         aria-label="text input"
         placeholder="Enter some text...">
</div>

按钮插件

我们可以将按钮作为插件添加到文本输入字段。

<div class="input-group">
  <input type="text"
         class="form-control" 
         placeholder="Search...">
  <span class="input-group-btn">
    <button class="btn btn-primary"
            type="button">Search</button>
  </span>
</div>

下拉插件

我们可以将下拉列表添加为文本输入字段。

<div class="input-group">
  <input type="text"
         class="form-control"
         placeholder="Search..."
         aria-label="...">
  <div class="input-group-btn">
    <button type="button"
            class="btn btn-primary dropdown-toggle"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"> Dropdown <span class="caret"></span></button>
    <ul class="dropdown-menu dropdown-menu-right">
      <li><a href="#">Menu Item 1</a></li>
      <li><a href="#">Menu Item 2</a></li>
      <li><a href="#">Menu Item 3</a></li>
    </ul>
  </div>
</div>

分段按钮

我们可以创建分段按钮作为文本输入字段的附件。

<div class="input-group">
  <div class="input-group-btn">
    <button type="button" 
            class="btn btn-primary">Button</button>
    <button type="button" 
            class="btn btn-primary dropdown-toggle"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"> Dropdown <span class="caret"></span> <span class="sr-only">Dropdown</span> </button>
    <ul class="dropdown-menu"> 
      <li><a href="#">Menu Item 1</a></li> 
      <li><a href="#">Menu Item 2</a></li> 
      <li><a href="#">Menu Item 3</a></li>
    </ul>
  </div> 
  <input class="form-control"
         placeholder="Enter some text..."
         aria-label="text input"> 
</div>

多个按钮

我们可以将多个按钮添加为文本输入字段。

<div class="input-group"> 
  <div class="input-group-btn">
    <button type="button"
            class="btn btn-default"
            aria-label="Cut">Cut</button>
    <button type="button"
            class="btn btn-default"
            aria-label="Italic">Copy</button> 
    <button type="button"
            class="btn btn-default"
            aria-label="Italic">Paste</button> 
  </div>
  <input class="form-control"
         aria-label="Text input"
         placeholder="Enter some text...">
</div>