4.3.4　嵌套分组

在平时使用过程中，我们经常将下拉菜单和普通的按钮组排列在一起，实现如图4-14所示的效果。

4.3.4　嵌套分组 - 图1 图4-14　嵌套分组运行效果

使用的时候，只需要将dropdown下拉菜单外部包装一个div容器元素，并在div元素上重新应用.btn-group样式，并且和普通的1、2、3按钮放在同一级即可。示例如下：

  1. <div class="btn-group">
  2.    <button class="btn btn-default" type="button">首页</button>
  3.    <button class="btn btn-default" type="button">个人简介</button>
  4.    <button class="btn btn-default" type="button">作品</button>
  5.    <div class="btn-group">
  6.       <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" 
  7.                type="button"> 图书<span class="caret"></span>
  8.       </button>
  9.       <ul class="dropdown-menu">
  10.          <li><a href="#">JavaScript编程精解</a></li>
  11.          <li><a href="#">JavaScript设计模式</a></li>
  12.          <li><a href="#">JavaScript启示录</a></li>
  13.       </ul>
  14.    </div>
  15. </div>

通过上述HTML代码可以发现，并没有在dropdown-menu父容器的div上设置dropdown样式（因为该样式有position: relative;设置），这是因为btn-group里也设置了该相对定位，所以可以省略dropdown样式。

圆角设置的规则和多组按钮的设置类似，唯一的不同就是嵌套的btn-group样式（以btn-group>btn-group开头）。主要源码如下：

  1. // 源码3734行
  2. .btn-group > .btn-group {
  3.   float: left;
  4. }
  5. .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
  6.  border-radius: 0;      /* 嵌套分组：除第一个分组、最后一个分组外，其他
  7.                              分组内的btn样式的按钮不设置圆角 */
  8. }
  9. .btn-group > .btn-group:first-child > .btn:last-child,
  10. .btn-group > .btn-group:first-child > .dropdown-toggle {
  11.  border-top-right-radius: 0; /* 嵌套分组内的第一个分组的最后一个按钮的右上和右下角不设置圆角 */
  12.  border-bottom-right-radius: 0;
  13. }
  14. .btn-group > .btn-group:last-child > .btn:first-child {
  15.  border-top-left-radius: 0;
  16.  border-bottom-left-radius: 0; /* 嵌套分组内的最后一个分组的第一个按钮的左上和左下角不设置圆角 */
  17. }
  18. .btn-group .dropdown-toggle:active,
  19. .btn-group.open .dropdown-toggle {      /* 嵌套dropdown，在打开的情况下，设置阴影*/
  20.  outline: 0;
  21. } 
  22. /* 源码 3225 行 */
  23. .btn-group.open .dropdown-toggle {      /* 嵌套dropdown，在打开的情况下，设置阴影*/
  24.  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  25.        box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  26. }
  27. .btn-group.open .dropdown-toggle.btn-link {
  28.  -webkit-box-shadow: none; /* 嵌套dropdown，在打开的情况下，如果是link按钮，就取消阴影*/
  29.        box-shadow: none;
  30. }