Bootstrap 按鈕下拉菜單

本章将講解如何使用 Bootstrap class 向按鈕添加下拉菜單。如需向按鈕添加下拉菜單，隻需要簡單地在一個 <b>.btn-group</b> 容器中放置按鈕和下拉菜單即可。您也可以使用 &lt;span class="caret"&gt;&lt;/span&gt; 來訓示按鈕作為下拉菜單。

下面的執行個體示範了一個基本的簡單的按鈕下拉菜單：

&lt;div class="btn-group"&gt;

&lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;預設

&lt;span class="caret"&gt;&lt;/span&gt;

&lt;/button&gt;

&lt;ul class="dropdown-menu" role="menu"&gt;

&lt;li&gt;

&lt;a href="#"&gt;功能&lt;/a&gt;

&lt;/li&gt;

&lt;a href="#"&gt;另一個功能&lt;/a&gt;

&lt;a href="#"&gt;其他&lt;/a&gt;

&lt;li class="divider"&gt;&lt;/li&gt;

&lt;a href="#"&gt;分離的連結&lt;/a&gt;

&lt;/ul&gt;

&lt;/div&gt;

&lt;button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"&gt;原始

結果如下所示：

分割的按鈕下拉菜單使用與下拉菜單按鈕大緻相同的樣式，但是對下拉菜單添加了原始的功能。分割按鈕的左邊是原始的功能，右邊是顯示下拉菜單的切換。

&lt;button type="button" class="btn btn-default"&gt;預設&lt;/button&gt;

&lt;button type="button" class="btn btn-default dropdown-toggle"

data-toggle="dropdown"&gt;

&lt;span class="sr-only"&gt;切換下拉菜單&lt;/span&gt;

&lt;li&gt;&lt;a href="#"&gt;功能&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="#"&gt;另一個功能&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="#"&gt;其他&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="#"&gt;分離的連結&lt;/a&gt;&lt;/li&gt;

&lt;button type="button" class="btn btn-primary"&gt;原始&lt;/button&gt;

&lt;button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"&gt;

您可以使用帶有各種大小按鈕的下拉菜單：<b>.btn-lg、.btn-sm </b>或 <b>.btn-xs</b>。

&lt;button type="button" class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown"&gt;預設

&lt;button type="button" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown"&gt;原始

&lt;button type="button" class="btn btn-success dropdown-toggle btn-xs" data-toggle="dropdown"&gt;成功

&lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;

菜單也可以往上拉伸的，隻需要簡單地向父 <b>.btn-group</b> 容器添加 <b>.dropup</b> 即可。

&lt;div class="row" style="margin-left:50px; margin-top:200px"&gt;

&lt;div class="btn-group dropup"&gt;