4.5.6　分段按钮作为addon

在基本用法小节的源码分析里，我们看到了Bootstrap对.input-group-btn样式容器内的多个.btn样式按钮也都做了处理，而且在按钮作为addon小节的源码分析里也对多个按钮的外边距进行了消除设置，所以也就是说，通过这两个方面的设置，在.input-group-btn样式里，也是可以放置多个按钮的，并且中间按钮的圆角也都会消除的。示例代码如下：

  1. <div class="row">
  2.     <div class="col-lg-4">
  3.         <div class="input-group">
  4.             <div class="input-group-btn">
  5.                 <button class="btn btn-default" type="button">按钮A</button>
  6.            <button data-toggle="dropdown" class="btn btn-default 
  7.                               dropdown-toggle" type="button">
  8.                     <span class="caret"></span><span class="sr-only">Toggle 
  9.                               Dropdown</span>
  10.                 </button>
  11.                 <button class="btn btn-default" type="button">按钮B</button>
  12.                 <button class="btn btn-default" type="button">按钮C</button>
  13.                 <ul role="menu" class="dropdown-menu">...</ul>
  14.             </div>
  15.             <input type="text" class="form-control">
  16.         </div>
  17.     </div>
  18.     <div class="col-lg-2">
  19.         <div class="input-group">
  20.             <input type="text" class="form-control">
  21.             <div class="input-group-btn open">
  22.                 <button class="btn btn-default" type="button">Action</button>
  23.                 <button data-toggle="dropdown" class="btn btn-default 
  24.                               dropdown-toggle" type="button">
  25.                     <span class="caret"></span><span class="sr-only">Toggle 
  26.                               Dropdown</span>
  27.                 </button>
  28.                 <ul role="menu" class="dropdown-menu pull-right">...</ul>
  29.             </div>
  30.         </div>
  31.     </div>
  32. </div>

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

4.5.6　分段按钮作为addon - 图1 图4-28　分段按钮作为addon的运行效果

只是有一点需要注意，所有的按钮都必须放置在.input-group-btn样式容器内。