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">
  5.         <button class="btn btn-default" type="button">Go!</button>
  6.       </span>
  7.       <input type="text" class="form-control" placeholder="Search for...">
  8.     </div><!-- /input-group -->
  9.   </div><!-- /.col-lg-6 -->
  10.   <div class="col-lg-6">
  11.     <div class="input-group">
  12.       <input type="text" class="form-control" placeholder="Search for...">
  13.       <span class="input-group-btn">
  14.         <button class="btn btn-default" type="button">Go!</button>
  15.       </span>
  16.     </div><!-- /input-group -->
  17.   </div><!-- /.col-lg-6 -->
  18. </div><!-- /.row -->

结果如下所示:

inputgrpradiochkbox_demo

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

  1. <div class="row">
  2.   <div class="col-lg-6">
  3.     <div class="input-group">
  4.       <div class="input-group-btn">
  5.         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
  6.         <ul class="dropdown-menu">
  7.           <li><a href="#">Action</a></li>
  8.           <li><a href="#">Another action</a></li>
  9.           <li><a href="#">Something else here</a></li>
  10.           <li role="separator" class="divider"></li>
  11.           <li><a href="#">Separated link</a></li>
  12.         </ul>
  13.       </div><!-- /btn-group -->
  14.       <input type="text" class="form-control" aria-label="...">
  15.     </div><!-- /input-group -->
  16.   </div><!-- /.col-lg-6 -->
  17.   <div class="col-lg-6">
  18.     <div class="input-group">
  19.       <input type="text" class="form-control" aria-label="...">
  20.       <div class="input-group-btn">
  21.         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
  22.         <ul class="dropdown-menu dropdown-menu-right">
  23.           <li><a href="#">Action</a></li>
  24.           <li><a href="#">Another action</a></li>
  25.           <li><a href="#">Something else here</a></li>
  26.           <li role="separator" class="divider"></li>
  27.           <li><a href="#">Separated link</a></li>
  28.         </ul>
  29.       </div><!-- /btn-group -->
  30.     </div><!-- /input-group -->
  31.   </div><!-- /.col-lg-6 -->
  32. </div><!-- /.row -->

结果如下所示:

inputgrpbtndropdown_demo

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

  1. <div class="row">
  2.   <div class="row">
  3.          <div class="col-lg-6">
  4.             <div class="input-group">
  5.                <div class="input-group-btn">
  6.                   <button type="button" class="btn btn-default" 
  7.                      tabindex="-1">下拉菜单
  8.                   </button>
  9.                   <button type="button" class="btn btn-default 
  10.                      dropdown-toggle" data-toggle="dropdown" tabindex="-1">
  11.                      <span class="caret"></span>
  12.                      <span class="sr-only">切换下拉菜单</span>
  13.                   </button>
  14.                   <ul class="dropdown-menu">
  15.                      <li><a href="#">功能</a></li>
  16.                      <li><a href="#">另一个功能</a></li>
  17.                      <li><a href="#">其他</a></li>
  18.                      <li class="divider"></li>
  19.                      <li><a href="#">分离的链接</a></li>
  20.                   </ul>
  21.                </div><!-- /btn-group -->
  22.                <input type="text" class="form-control">
  23.             </div><!-- /input-group -->
  24.          </div><!-- /.col-lg-6 --><br>
  25.          <div class="col-lg-6">
  26.             <div class="input-group">
  27.                <input type="text" class="form-control">
  28.                <div class="input-group-btn">
  29.                   <button type="button" class="btn btn-default" 
  30.                      tabindex="-1">下拉菜单
  31.                   </button>
  32.                   <button type="button" class="btn btn-default 
  33.                      dropdown-toggle" data-toggle="dropdown" tabindex="-1">
  34.                      <span class="caret"></span>
  35.                      <span class="sr-only">切换下拉菜单</span>
  36.                   </button>
  37.                   <ul class="dropdown-menu pull-right">
  38.                      <li><a href="#">功能</a></li>
  39.                      <li><a href="#">另一个功能</a></li>
  40.                      <li><a href="#">其他</a></li>
  41.                      <li class="divider"></li>
  42.                      <li><a href="#">分离的链接</a></li>
  43.                   </ul>
  44.                </div><!-- /btn-group -->
  45.             </div><!-- /input-group -->
  46.          </div><!-- /.col-lg-6 -->
  47.       </div><!-- /.row -->

结果如下所示:

inputgroupsegmenteddrpdown_demo


发布日期:

所属分类: BootStrap, 前端 标签: