按鈕（嵌套分組）
使用的時候，只需要把當初製作下拉菜單的“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>