Bootstrap3系列：按鈕式下拉菜單

1. 基本實例

　　把按鈕放入 .btn-group 中，加入適當的菜單標簽，讓按鈕觸發下拉菜單。

1.1 示例代碼

<div class="btn-group">
    <a class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        按鈕式下拉菜單<span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">菜單項1</a></li>
        <li><a href="#">菜單項2</a></li>
        <li class="divider"></li>
        <li><a href="#">菜單項3</a></li>
    </ul>
</div>

1.2 示例效果

2. 分裂式按鈕下拉菜單

2.1 示例代碼

<div class="btn-group">
    <a class="btn btn-default">分裂式按鈕下拉菜單</a>
    <a class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">菜單項1</a></li>
        <li><a href="#">菜單項2</a></li>
        <li class="divider"></li>
        <li><a href="#">菜單項3</a></li>
    </ul>
</div>

2.2 示例效果

3. 尺寸

　　在.btn元素上添加.btn-lg用於設置尺寸

3.1 示例代碼

3.2 示例效果

4. 向上彈出式菜單

　　在.btn-group元素上添加.dropup設置向上式彈出菜單

4.1 示例代碼

<div class="btn-group dropup">
    <a class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        按鈕式下拉菜單<span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">菜單項1</a></li>
        <li><a href="#">菜單項2</a></li>
        <li class="divider"></li>
        <li><a href="#">菜單項3</a></li>
    </ul>
</div>

4.2 示例效果