4.5.4　按钮作为addon

输入框组上的addon支持复选框和单选框，是不是也支持普通的button以addon的形式出现呢？Bootstrap开发者当然也考虑到这一点了，但是由前面的章节我们知道，.btn按钮样式上定义了各种各样的样式（比如大小、颜色、内外边距等），其不像checkbox、radio、label等直接放到.input-group-addon样式里就行的，所以为了避免冲突，作者为.btn样式又单独设置了一个.input-group-btn样式（基础用法里提到过），用其替换.input-group-addon作为新的addon容器。示例用法如下：

  1. <div class="row">
  2.     <div class="col-lg-6">
  3.         <div class="input-group">
  4.             <span class="input-group-btn"><button class="btn btn-default" type=
  5.                 "button">Go!</button></span>
  6.             <input type="text" class="form-control">
  7.         </div>
  8.     </div>
  9.     <div class="col-lg-6">
  10.         <div class="input-group">
  11.             <input type="text" class="form-control">
  12.             <span class="input-group-btn"><button class="btn btn-default" type=
  13.               "button">Go!</button></span>
  14.         </div>
  15.     </div>
  16. </div>

上述代码的运行效果如图4-26所示。

4.5.4　按钮作为addon - 图1 图4-26　按钮组作为addon的运行效果

就如基本用法里源码分析的一样，.input-group-btn样式共用了.input-group-addon样式的部分设置，然后又单独处理了各种内外边距。源码如下：

  1. // 源码3433行
  2. .input-group-btn {
  3.   position: relative;   /*相对定位*/
  4.   font-size: 0;
  5.   white-space: nowrap;
  6. }
  7. .input-group-btn > .btn {
  8.   position: relative;   /*所有.input-group-btn容器内的按钮都相对定位*/
  9. }
  10. .input-group-btn > .btn + .btn {
  11.   margin-left: -1px;            /*所有.input-group-btn容器内的按钮之间的左外边距都有-1像素，以便靠近*/
  12. }
  13. .input-group-btn > .btn:hover,
  14. .input-group-btn > .btn:focus,
  15. .input-group-btn > .btn:active {
  16.   z-index: 2;           /*高亮时，加大z-index*/
  17. }
  18. .input-group-btn:first-child > .btn,
  19. .input-group-btn:first-child > .btn-group {
  20.   margin-right: -1px;   /*第一个.input-group-btn容器内的按钮或按钮组，右外边距设置为
  21.                             -1，以便都可以靠近*/
  22. }
  23. .input-group-btn:last-child > .btn,
  24. .input-group-btn:last-child > .btn-group {
  25.   margin-left: -1px; /*最后一个.input-group-btn容器内的按钮或按钮组，左外边距设置为-1，
  26.                             以便都可以靠近*/
  27. }