Bootstrap教程输入框组

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

只支持文本输入框 <input>

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

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

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

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

不要和其他组件混用

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

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

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

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

  1. <div class="input-group">
  2.   <span class="input-group-addon" id="basic-addon1">@</span>
  3.   <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
  4. </div>
  5.  
  6. <div class="input-group">
  7.   <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  8.   <span class="input-group-addon" id="basic-addon2">@example.com</span>
  9. </div>
  10.  
  11. <div class="input-group">
  12.   <span class="input-group-addon">$</span>
  13.   <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  14.   <span class="input-group-addon">.00</span>
  15. </div>

结果如下所示:

inputgroup_demo

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

  1. <div class="input-group input-group-lg">
  2.   <span class="input-group-addon" id="sizing-addon1">@</span>
  3.   <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
  4. </div>
  5. <div class="input-group">
  6.   <span class="input-group-addon" id="sizing-addon2">@</span>
  7.   <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
  8. </div>
  9. <div class="input-group input-group-sm">
  10.   <span class="input-group-addon" id="sizing-addon3">@</span>
  11.   <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
  12. </div>

结果如下所示:

inputgroup_demo

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

  1. <div class="row">
  2.   <div class="col-lg-6">
  3.     <div class="input-group">
  4.       <span class="input-group-addon">
  5.         <input type="checkbox" aria-label="...">
  6.       </span>
  7.       <input type="text" class="form-control" aria-label="...">
  8.     </div><!-- /input-group -->
  9.   </div><!-- /.col-lg-6 -->
  10.   <div class="col-lg-6">
  11.     <div class="input-group">
  12.       <span class="input-group-addon">
  13.         <input type="radio" aria-label="...">
  14.       </span>
  15.       <input type="text" class="form-control" aria-label="...">
  16.     </div><!-- /input-group -->
  17.   </div><!-- /.col-lg-6 -->
  18. </div><!-- /.row -->

结果如下所示:

inputgrpradiochkbox_demo

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

  1. <div class="row">
  2.   <div class="col-lg-6">
  3.     <div class="input-group">
  4.       <span class="input-group-btn"