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 示例效果