Bootstrap 按鈕下拉菜單
本章將講解如何使用Bootstrap class 向按鈕添加下拉菜單。 如需向按鈕添加下拉菜單，只需要簡單地在在一個.btn-group中放置按鈕和下拉菜單即可。 您也可以使用<span class="caret"></span> 來指示按鈕作為下拉菜單。
下面的實例演示了一個基本的簡單的按鈕下拉菜單：
實例
< div class = " btn-group " >
< button type = " button " class = " btn btn-default dropdown-toggle " data-toggle = " dropdown " > 默認 < span class = " caret " > </ span >
</ button >
< ul class = " dropdown-menu " role = " menu " >
< li >
< a href = " # " > 功能 </ a >
</ li >
< li >
< a href = " # " > 另一個功能 </ a >
</ li >
< li >
< a href = " # " > 其他 </ a >
</ li >
< li class = " divider " > </ li >
< li >
< a href = " # " > 分離的鏈接 </ a >
</ li >
</ ul >
</ div >
< div class = " btn-group " >
< button type = " button " class = " btn btn-primary dropdown-toggle " data-toggle = " dropdown " > 原始 < span class = " caret " > </ span >
</ button >
< ul class = " dropdown-menu " role = " menu " >
< li >
< a href = " # " > 功能 </ a >
</ li >
< li >
< a href = " # " > 另一個功能 </ a >
</ li >
< li >
< a href = " # " > 其他 </ a >
</ li >
< li class = " divider " > </ li >
< li >
< a href = " # " > 分離的鏈接 </ a >
</ li >
</ ul >
</ div >
嘗試一下»
結果如下所示：
分割的按鈕下拉菜單
分割的按鈕下拉菜單使用與下拉菜單按鈕大致相同的樣式，但是對下拉菜單添加了原始的功能。 分割按鈕的左邊是原始的功能，右邊是顯示下拉菜單的切換。
實例
< div class = " btn-group " >
< button type = " button " class = " btn btn-default " > 默認 </ button >
< button type = " button " class = " btn btn-default dropdown-toggle "
data-toggle = " dropdown " >
< span class = " caret " > </ span >
< span class = " sr-only " > 切換下拉菜單 </ span >
</ button >
< ul class = " dropdown-menu " role = " menu " >
< li > < a href = " # " > 功能 </ a > </ li >
< li > < a href = " # " > 另一個功能 </ a > </ li >
< li > < a href = " # " > 其他 </ a > </ li >
< li class = " divider " > </ li >
< li > < a href = " # " > 分離的鏈接 </ a > </ li >
</ ul >
</ div >
< div class = " btn-group " >
< button type = " button " class = " btn btn-primary " > 原始 </ button >
< button type = " button " class = " btn btn-primary dropdown-toggle " data-toggle = " dropdown " >
< span class = " caret " > </ span >
< span class = " sr-only " > 切換下拉菜單 </ span >
</ button >
< ul class = " dropdown-menu " role = " menu " >
< li > < a href = " # " > 功能 </ a > </ li >
< li > < a href = " # " > 另一個功能 </ a > </ li >
< li > < a href = " # " > 其他 </ a > </ li >
< li class = " divider " > </ li >
< li > < a href = " # " > 分離的鏈接 </ a > </ li >
</ ul >
</ div >
嘗試一下»
結果如下所示：
按鈕下拉菜單的大小
您可以使用帶有各種大小按鈕的下拉菜單：.btn-large、.btn-sm或.btn-xs。
實例
< div class = " btn-group " >
< button type = " button " class = " btn btn-default dropdown-toggle btn-lg " data-toggle = " dropdown " > 默認 < span class = " caret " > </ span >
</ button >
< ul class = " dropdown-menu " role = " menu " >
< li >
< a href = " # " > 功能 </ a >
</ li >
< li >
< a href = " # " > 另一個功能 </ a >
</ li >
< li >
< a href = " # " > 其他 </ a >
</ li >
< li class = " divider " > </ li >
< li >
< a href = " # " > 分離的鏈接 </ a >
</ li >
</ ul >
</ div >
< div class = " btn-group " >
< button type = " button " class = " btn btn-primary dropdown-toggle btn-sm " data-toggle = " dropdown " > 原始 < span class = " caret " > </ span >
</ button >
< ul class = " dropdown-menu " role = " menu " >
< li >
< a href = " # " > 功能 </ a >
</ li >
< li >
< a href = " # " > 另一個功能 </ a >
</ li >
< li >
< a href = " # " > 其他 </ a >
</ li >
< li class = " divider " > </ li >
< li >
< a href = " # " > 分離的鏈接 </ a >
</ li >
</ ul >
</ div >
< div class = " btn-group " >
< button type = " button " class = " btn btn-success dropdown-toggle btn-xs " data-toggle = " dropdown " > 成功 < span class = " caret " > </ span > </ button >
< ul class = " dropdown-menu " role = " menu " >
< li >
< a href = " # " > 功能 </ a >
</ li >
< li >
< a href = " # " > 另一個功能 </ a >
</ li >
< li >
< a href = " # " > 其他 </ a >
</ li >
< li class = " divider " > </ li >
< li >
< a href = " # " > 分離的鏈接 </ a >
</ li >
</ ul >
</ div >
嘗試一下»
結果如下所示：
按鈕上拉菜單
菜單也可以往上拉伸的，只需要簡單地向父.btn-group容器添加.dropup即可。
實例
< div class = " row " style = " margin-left:50px; margin-top:200px " >
< div class = " btn-group dropup " >
< button type = " button " class = " btn btn-default dropdown-toggle " data-toggle = " dropdown " > 默認 < span class = " caret " > </ span >
</ button >
< ul class = " dropdown-menu " role = " menu " >
< li >
< a href = " # " > 功能 </ a >
</ li >
< li >
< a href = " # " > 另一個功能 </ a >
</ li >
< li >
< a href = " # " > 其他 </ a >
</ li >
< li class = " divider " > </ li >
< li >
< a href = " # " > 分離的鏈接 </ a >
</ li >
</ ul >
</ div >
< div class = " btn-group dropup " >
< button type = " button " class = " btn btn-primary dropdown-toggle " data-toggle = " dropdown " > 原始 < span class = " caret " > </ span >
</ button >
< ul class = " dropdown-menu " role = " menu " >
< li >
< a href = " # " > 功能 </ a >
</ li >
< li >
< a href = " # " > 另一個功能 </ a >
</ li >
< li >
< a href = " # " > 其他 </ a >
</ li >
< li class = " divider " > </ li >
< li >
< a href = " # " > 分離的鏈接 </ a >
</ li >
</ ul >
</ div >
</ div >
嘗試一下»
結果如下所示：
