Bootstrap教程输入框组

文章目录[隐藏]

基本实例
我们不支持在输入框的单独一侧添加多个额外元素。
我们不支持在单个输入框组中添加多个表单控件。
输入框组的大小
复选框和单选插件
作为额外元素的按钮
带有下拉菜单的按钮
作为额外元素的分裂式按钮下拉菜单

输入框组扩展自表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。

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

只支持文本输入框 <input>

这里请避免使用 <select> 元素，因为 WebKit 浏览器不能完全绘制它的样式。

避免使用 <textarea> 元素，由于它们的 rows 属性在某些情况下不被支持。

输入框组中的工具提示和弹出框需要特别的设置为

.input-group 中所包含的元素应用工具提示（tooltip）或popover（弹出框）时，必须设置 container: 'body' 参数，为的是避免意外的副作用（例如，工具提示或弹出框被激活后，可能会让当前元素变得更宽或/和变得失去其圆角）。

不要和其他组件混用

不要将表单组或栅格列（column）类直接和输入框组混合使用。而是将输入框组嵌套到表单组或栅格相关元素的内部。

基本实例

在输入框的任意一侧添加额外元素或按钮。你还可以在输入框的两侧同时添加额外元素。

`我们不支持在输入框的单独一侧添加多个额外元素。`

`我们不支持在单个输入框组中添加多个表单控件。`

```
<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>
```

结果如下所示：

点击在线尝试一下

输入框组的大小

为 .input-group 添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸。不需要为输入框组中的每个元素重复地添加控制尺寸的类。
您可以通过向 .input-group 添加相对表单大小的 class（比如 .input-group-lg、input-group-sm、input-group-xs）来改变输入框组的大小。输入框中的内容会自动调整大小。

<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>
```

结果如下所示：

点击在线尝试一下

带有下拉菜单的按钮

在输入框组中添加带有下拉菜单的按钮，只需要简单地在一个 .input-group-btn class 中包裹按钮和下拉菜单即可，如下面的实例所示：

```
<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">Action <span class="caret"></span></button>

```
        <ul class="dropdown-menu">
```

          <li><a href="#">Action</a></li>

          <li><a href="#">Another action</a></li>

          <li><a href="#">Something else here</a></li>

          <li role="separator" class="divider"></li>

          <li><a href="#">Separated link</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">Action <span class="caret"></span></button>

        <ul class="dropdown-menu dropdown-menu-right">

          <li><a href="#">Action</a></li>

          <li><a href="#">Another action</a></li>

          <li><a href="#">Something else here</a></li>

          <li role="separator" class="divider"></li>

          <li><a href="#">Separated link</a></li>

```
        </ul>
```
```
      </div>
```
```
    </div>
```
```
  </div>
```
```
</div>
```

结果如下所示：

点击在线尝试一下

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

在输入框组中添加带有下拉菜单的按钮，只需要简单地在一个 .input-group-btn class 中包裹按钮和下拉菜单即可，如下面的实例所示：

```
<div class="row">
```
```
  <div class="row">
```
```
         <div class="col-lg-6">
```
```
            <div class="input-group">
```

               <div class="input-group-btn">

                  <button type="button" class="btn btn-default"

                     tabindex="-1">下拉菜单

```
                  </button>
```

                  <button type="button" class="btn btn-default

                     dropdown-toggle" data-toggle="dropdown" tabindex="-1">

                     <span class="caret"></span>

                     <span class="sr-only">切换下拉菜单</span>

```
                  </button>
```

                  <ul class="dropdown-menu">

                     <li><a href="#">功能</a></li>

                     <li><a href="#">另一个功能</a></li>

                     <li><a href="#">其他</a></li>

                     <li class="divider"></li>

                     <li><a href="#">分离的链接</a></li>

```
                  </ul>
```

               </div><!-- /btn-group -->

               <input type="text" class="form-control">

```
            </div>
```
```
         </div><br>
```
```
         <div class="col-lg-6">
```
```
            <div class="input-group">
```

               <input type="text" class="form-control">

               <div class="input-group-btn">

                  <button type="button" class="btn btn-default"

                     tabindex="-1">下拉菜单

```
                  </button>
```

                  <button type="button" class="btn btn-default

                     dropdown-toggle" data-toggle="dropdown" tabindex="-1">

                     <span class="caret"></span>

                     <span class="sr-only">切换下拉菜单</span>

```
                  </button>
```

                  <ul class="dropdown-menu pull-right">

                     <li><a href="#">功能</a></li>

                     <li><a href="#">另一个功能</a></li>

                     <li><a href="#">其他</a></li>

                     <li class="divider"></li>

                     <li><a href="#">分离的链接</a></li>

```
                  </ul>
```

               </div><!-- /btn-group -->

```
            </div>
```
```
         </div>
```
```
      </div>
```

结果如下所示：

点击在线尝试一下

511遇见

不一样的遇见

Bootstrap教程输入框组

基本实例

`我们不支持在输入框的单独一侧添加多个额外元素。`

`我们不支持在单个输入框组中添加多个表单控件。`

输入框组的大小

复选框和单选插件

作为额外元素的按钮

带有下拉菜单的按钮

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

您可能感兴趣的文章:

相关文章: