按鈕（嵌套分組）
使用的時候，只需要把當初制作下拉菜單的“dropdown”的容器換成“btn-group”，并且和普通的按鈕放在同一級。如下所示：
<div?class="btn-group"> <button?class="btnbtn-default"?type="button">首頁</button> <button?class="btnbtn-default"?type="button">產品展示</button> <button?class="btnbtn-default"?type="button">案例分析</button> <button?class="btnbtn-default"?type="button">聯系我們</button> <div?class="btn-group"><button?class="btnbtn-default?dropdown-toggle"?data-toggle="dropdown"?type="button">關于我們<span?class="caret"></span></button><ul?class="dropdown-menu"><li><a?href="##">公司簡介</a></li><li><a?href="##">企業文化</a></li><li><a?href="##">組織結構</a></li><li><a?href="##">客服服務</a></li></ul> </div> </div>
實現的樣式代碼：
/*查看bootstrap.css文件第3192行～第3223行*/
.btn-group?>?.btn-group?{float:?left;
}
.btn-group?>?.btn-group:not(:first-child):not(:last-child)?>?.btn?{border-radius:?0;
}
.btn-group?>?.btn-group:first-child>?.btn:last-child,
.btn-group?>?.btn-group:first-child>?.dropdown-toggle?{border-top-right-radius:?0;border-bottom-right-radius:?0;
}
.btn-group?>?.btn-group:last-child>?.btn:first-child?{border-top-left-radius:?0;border-bottom-left-radius:?0;
}
.btn-group?.dropdown-toggle:active,
.btn-group.open?.dropdown-toggle?{outline:?0;
}
.btn-group?>?.btn?+?.dropdown-toggle?{padding-right:?8px;padding-left:?8px;
}
.btn-group?>?.btn-lg?+?.dropdown-toggle?{padding-right:?12px;padding-left:?12px;
}
.btn-group.open?.dropdown-toggle?{-webkit-box-shadow:?inset?0?3px?5px?rgba(0,?0,?0,?.125);box-shadow:?inset?0?3px?5px?rgba(0,?0,?0,?.125);
}
.btn-group.open?.dropdown-toggle.btn-link?{-webkit-box-shadow:?none;box-shadow:?none;
}按鈕（垂直分組）
前面看到的示例，按鈕組都是水平顯示的。但在實際運用當中，總會碰到垂直顯示的效果。在Bootstrap框架中也提供了這樣的風格。我們只需要把水平分組的“btn-group”類名換成“btn-group-vertical”即可。如下所示：
<div?class="btn-group-vertical"> <button?class="btnbtn-default"?type="button">首頁</button> <button?class="btnbtn-default"?type="button">產品展示</button> <button?class="btnbtn-default"?type="button">案例分析</button> <button?class="btnbtn-default"?type="button">聯系我們</button> <div?class="btn-group"><button?class="btnbtn-default?dropdown-toggle"?data-toggle="dropdown"?type="button">關于我們<span?class="caret"></span></button><ul?class="dropdown-menu"><li><a?href="##">公司簡介</a></li><li><a?href="##">企業文化</a></li><li><a?href="##">組織結構</a></li><li><a?href="##">客服服務</a></li> </ul> </div> </div>
按鈕（等分按鈕）
等分按鈕的效果在移動端上特別的實用。整個按鈕組寬度是容器的100%，而按鈕組里面的每個按鈕平分整個容器寬度。例如，如果你按鈕組里面有五個按鈕，那么每個按鈕是20%的寬度，如果有四個按鈕，那么每個按鈕是25%寬度，以此類推。
等分按鈕也常被稱為是自適應分組按鈕，其實現方法也非常的簡單，只需要在按鈕組“btn-group”上追加一個“btn-group-justified”類名，如下所示：
<div?class="btn-wrap"> <div?class="btn-group?btn-group-justified"><a?class="btnbtn-default"?href="#">首頁</a><a?class="btnbtn-default"?href="#">產品展示</a><a?class="btnbtn-default"?href="#">案例分析</a><a?class="btnbtn-default"?href="#">聯系我們</a> </div> </div>
實現原理非常簡單，把“btn-group-justified”模擬成表格（display:table），而且把里面的按鈕模擬成表格單元格（display:table-cell）。具體樣式代碼如下：
/*源碼請查看bootstrap.css文件第3277行～第3291行*/
.btn-group-justified?{display:?table;width:?100%;table-layout:?fixed;border-collapse:?separate;
}
.btn-group-justified?>?.btn,
.btn-group-justified?>?.btn-group?{display:?table-cell;float:?none;width:?1%;
}
.btn-group-justified?>?.btn-group?.btn?{width:?100%;
}特別聲明：在制作等分按鈕組時，請盡量使用<a>標簽元素來制作按鈕，因為使用<button>標簽元素時，使用display:table在部分瀏覽器下支持并不友好
按鈕下拉菜單
按鈕下拉菜單僅從外觀上看和上一節介紹的下拉菜單效果基本上是一樣的。不同的是在普通的下拉菜單的基礎上封裝了按鈕（.btn）樣式效果。簡單點說就是點擊一個按鈕，會顯示隱藏的下拉菜單。
按鈕下拉菜單其實就是普通的下拉菜單，只不過把“<a>”標簽元素換成了“<button>”標簽元素。唯一不同的是外部容器“div.dropdown”換成了“div.btn-group”。如下所示：
<div?class="btn-group"><button?class="btn?btn-default?dropdown-toggle"?data-toggle="dropdown"?type="button">按鈕下拉菜單<span?class="caret"></span></button><ul?class="dropdown-menu"><li><a?href="##">按鈕下拉菜單項</a></li><li><a?href="##">按鈕下拉菜單項</a></li><li><a?href="##">按鈕下拉菜單項</a></li><li><a?href="##">按鈕下拉菜單項</a></li></ul> </div>
實現樣式代碼如下：
/*查看bootstrap.css文件第3204行～第3223行*/
.btn-group?.dropdown-toggle:active,
.btn-group.open?.dropdown-toggle?{outline:?0;
}
.btn-group?>?.btn?+?.dropdown-toggle?{padding-right:?8px;padding-left:?8px;
}
.btn-group?>?.btn-lg?+?.dropdown-toggle?{padding-right:?12px;padding-left:?12px;
}
.btn-group.open?.dropdown-toggle?{-webkit-box-shadow:?inset?0?3px?5px?rgba(0,?0,?0,?.125);box-shadow:?inset?0?3px?5px?rgba(0,?0,?0,?.125);
}
.btn-group.open?.dropdown-toggle.btn-link?{-webkit-box-shadow:?none;box-shadow:?none;
}按鈕的向下向上三角形
按鈕的向下三角形，我們是通過在<button>標簽中添加一個“<span>”標簽元素，并且命名為“caret”:
<button?class="btn?btn-default?dropdown-toggle"?data-toggle="dropdown"?type="button">按鈕下拉菜單<span?class="caret"></span></button>
這個三角形完全是通過CSS代碼來實現的：
/*源碼請查看bootstrap.css文件第2994行～第3003行*/
.caret?{display:?inline-block;width:?0;height:?0;margin-left:?2px;vertical-align:?middle;border-top:?4px?solid;border-right:?4px?solid?transparent;border-left:?4px?solid?transparent;
}另外在按鈕中的三角形“caret”做了一定的樣式處理：
/*源碼查看bootstrap.css文件第3224行～第3233行*/
.btn?.caret?{margin-left:?0;
}
.btn-lg?.caret?{border-width:?5px?5px?0;border-bottom-width:?0;
}
.dropup?.btn-lg?.caret?{border-width:?0?5px?5px;
}有的時候我們的下拉菜單會向上彈起（接下來一個小節會介紹），這個時候我們的三角方向需要朝上顯示，實現方法：需要在“.btn-group”類上追加“dropup”類名（這也是做向上彈起下拉菜單要用的類名）。
/*源碼請查看bootstrap.css文件第3109行～第3114行*/
.dropup?.caret,
.navbar-fixed-bottom?.dropdown?.caret?{content:?"";border-top:?0;border-bottom:?4px?solid;
}上面代碼中可以看出，向上三角與向下三角的區別：其實就是改變了一個border-bottom的值。
下面是向上彈起菜單的例子：
<div?class="btn-group?dropup"><button?class="btn?btn-default?dropdown-toggle"?data-toggle="dropdown"?type="button">按鈕下拉菜單<span?class="caret"></span></button><ul?class="dropdown-menu"><li><a?href="##">按鈕下拉菜單項</a></li><li><a?href="##">按鈕下拉菜單項</a></li><li><a?href="##">按鈕下拉菜單項</a></li><li><a?href="##">按鈕下拉菜單項</a></li></ul> </div>
向上彈起的下拉菜單
有些菜單是需要向上彈出的，比如說你的菜單在頁面最底部，而這個菜單正好有一個下拉菜單，為了讓用戶有更好的體驗，不得不讓下拉菜單向上彈出。在Bootstrap框架中專門為這種效果提代了一個類名“dropup”。使用方法正如前面所示，只需要在“btn-group”上添加這個類名（當然，如果是普通向上彈出下拉菜單，你只需要在“dropdown”類名基礎上追加“dropup”類名即可）。
<div?class="btn-group?dropup"><button?class="btn?btn-default?dropdown-toggle"?data-toggle="dropdown"?type="button">按鈕下拉菜單<span?class="caret"></span></button><ul?class="dropdown-menu"><li><a?href="##">按鈕下拉菜單項</a></li><li><a?href="##">按鈕下拉菜單項</a></li><li><a?href="##">按鈕下拉菜單項</a></li><li><a?href="##">按鈕下拉菜單項</a></li></ul> </div>
