4.5.1　基本用法

有些时候，我们需要将文本输入框（Input group）和文字或者小icon组合在一起进行显示（我们称之为addon）。例如经常需要如图4-23所示效果的表单输入框。

4.5.1　基本用法 - 图1 图4-23　输入框组运行效果

Bootstrap在3.x版将其独立出来了，成为了一个单独的输入框组（Input group）。使用方式也非常简单，只需要在容器上应用.input-group样式，然后对需要在input前后显示的个性元素上应用.input-group-addon样式即可。

  1. <div class="input-group">
  2.     <span class="input-group-addon">$</span>
  3.     <input type="text" class="form-control"><!-- 这里的input，必须使用form-control
  4.             样式才行 -->
  5.     <span class="input-group-addon">.00</span>
  6. </div>

具体实现方式有几个重要的知识点，步骤如下：

步骤1　将各元素无缝地拼接在一起，即设置margin为0。

步骤2　将各元素设置为等高显示，即设置display为table-cell。

步骤3　设置addon元素的显示方式。

步骤4　不管前后有没有addon或有几个，按照如下规则进行圆角处理。

❑设置input-group元素里的第一个input或input-group-addon元素的左上角和左下角为圆角

❑设置input-group元素里的最后一个input或input-group-addon元素的右上角和右下角为圆角

其中步骤1~步骤3的主要源码如下：

  1. // 源码3305行
  2. .input-group {
  3.   position: relative;   /* 相对定位 */
  4.   display: table;               /* 表格布局 */
  5.   border-collapse: separate;
  6. }
  7. .input-group[class*="col-"] {   /* input-group如果也同时应用了col样式，则取消浮动和左右
  8.                             padding */
  9.   float: none;
  10.   padding-right: 0;
  11.   padding-left: 0;
  12. }
  13. .input-group .form-control {
  14.   float: left;          /* 左浮动，防止由于IE9的占位符和select元素的箭头而导致变形*/
  15.   width: 100%;          /* input-group里的form-control组件的宽度都设为100% */
  16.   margin-bottom: 0;
  17. }
  18. /* 此处代码从3982行开始 */
  19. .input-group-addon,
  20. .input-group-btn {
  21.   width: 1%;            /* 设置最小值，以便表格模式进行等分 */
  22.   white-space: nowrap;
  23.   vertical-align: middle;       /* 垂直居中 */
  24. }
  25. .input-group-addon {    /* 设置addon*/
  26.   padding: 6px 12px;
  27.   font-size: 14px;
  28.   font-weight: normal;
  29.   line-height: 1;
  30.   color: #555;
  31.   text-align: center;
  32.   background-color: #eee;
  33.   border: 1px solid #ccc;
  34.   border-radius: 4px;   /* 圆角设置（结合上面代码，可判断出是第一个和最后一个）*/
  35. }

关于第4步圆角的处理，可能认为很简单，不就是简单地把第一个和最后一个元素的圆角设置一下就行了，即先把所有的圆角都去除，然后再恢复第一个和最后一个元素的圆角设置，就可以了。

是的，一般情况下是没问题的，但如果内部有多个input，多个addon，可能就不灵了。在2.x版本时作者也是这么实现的，可是带来了很多问题，后续在3.x版又进行了重构。先来看看老版的代码，和我们想象的一样。

  1. .input-group-addon,.input-group-btn,.input-group input {
  2.   display: table-cell; 
  3.   margin: 0;
  4.   border-radius: 0;                     /* 取消设置圆角 */
  5. }
  6. …
  7. .input-group input:first-child,
  8. .input-group-addon:first-child {
  9. /* 设置input-group里第一个input或者input-group-addon元素的左上方和左下方的圆角 */
  10.   border-bottom-left-radius: 4px; 
  11.   border-top-left-radius: 4px;
  12. }
  13. …
  14. .input-group input:last-child,
  15. .input-group-addon:last-child {
  16. /* 设置input-group里最后一个input或者input-group-addon元素的右上方和右下方的圆角 */
  17.   border-top-right-radius: 4px;  
  18. border-bottom-right-radius: 4px;
  19. }

新版的实现方式很精妙，我们分析的时候，一定要在纸上多画几个input或者addon，因为这里面牵涉了很多所有input（但不包括第一个和最后一个）这样的设置，多画几个容易理解。另外只看一遍也不容易看懂，希望大家多画几个场景，多读几遍下面的源码（尽力做了注释）。

  1. // 源码3407行
  2. /* input-group容器内的第一个form-control样式的组件 */
  3. .input-group .form-control:first-child,
  4. /* 第一个addon组件 */
  5. .input-group-addon:first-child,
  6. /* 第一个.input-group-btn容器里的按钮 */
  7. .input-group-btn:first-child > .btn,
  8. /* 第一个.input-group-btn容器里的所有.btn-group组里的按钮 */
  9. .input-group-btn:first-child > .btn-group > .btn,
  10. /* 第一个.input-group-btn容器里的下拉菜单 */
  11. .input-group-btn:first-child > .dropdown-toggle,
  12. /* 最后一个.input-group-btn容器里的按钮（不包括最后一个按钮以及下拉菜单） */
  13. .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
  14. /* 最后一个.input-group-btn容器里的所有.btn-group组（但不是最后一个）中的按钮 */
  15. .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
  16.   border-top-right-radius: 0;           /*清除右上角圆角*/
  17.   border-bottom-right-radius: 0;        /*清除右下角圆角*/
  18. }
  19. .input-group-addon:first-child {
  20.   border-right: 0; /* 第一个addon组件的右边框设置为0，以便和右边的input靠近 */
  21. }
  22. /* input-group容器内的最后一个form-control样式的组件 */
  23. .input-group .form-control:last-child,
  24. /* 最后一个addon组件 */
  25. .input-group-addon:last-child,
  26. /* 最后一个.input-group-btn容器里的按钮 */
  27. .input-group-btn:last-child > .btn,
  28. /* 最后一个.input-group-btn容器里的.btn-group子容器里的按钮 */
  29. .input-group-btn:last-child > .btn-group > .btn,
  30. /* 最后一个.input-group-btn容器里的下拉菜单 */
  31. .input-group-btn:last-child > .dropdown-toggle,
  32. /* 第一个.input-group-btn容器里的按钮（不包括第一个按钮） */
  33. .input-group-btn:first-child > .btn:not(:first-child),
  34. /* 第一个.input-group-btn容器里的所有.btn-group组（但不是第一个）中的按钮 */
  35. .input-group-btn:first-child > .btn-group:not(:first-child) > .btn { 
  36.   border-top-left-radius: 0;            /*清除左上角圆角*/
  37.   border-bottom-left-radius: 0;         /*清除左下角圆角*/
  38. }

注意

❑请尽量避免在select元素上使用该功能，因为WebKit浏览器不完全支持input-group组件的特性。

❑不要直接将.input-group和.form-group混合使用，因为.input-group是一个独立的组件。

❑上述代码有很多关于.input-group-btn样式的设置，将在4.5.4小节进行讲解。