Bootstrap按钮式下拉菜单

把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。

---

单按钮下拉菜单

    <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">
          <li><a href="">广州</a></li>
          <li><a href="">深圳</a></li>
          <li><a href="">东莞</a></li>
        </ul>      
      </div>

---

分裂式按钮下拉菜单

相似地，分裂式按钮下拉菜单也需要同样的改变一些标记，但只是多一个分开的按钮。

    <div class="btn-group">
        <button type="button" class="btn btn-success">广东</button>
        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="">广州</a></li>
          <li><a href="">深圳</a></li>
          <li><a href="">东莞</a></li>
        </ul>      
    </div>

---

尺寸

使用btn-lg,btn-sm,btn-xs等类来修饰；

    <!-- lager Button -->
    <div class="btn-group">
        <button type="button" class="btn btn-success btn-lg dropdown-toggle" data-toggle="dropdown">
          广东<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="">广州</a></li>
          <li><a href="">深圳</a></li>
          <li><a href="">东莞</a></li>
        </ul>      
    </div>   

    <!-- small button -->
    <div class="btn-group">
        <button type="button" class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown">
          广东<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="">广州</a></li>
          <li><a href="">深圳</a></li>
          <li><a href="">东莞</a></li>
        </ul>      
    </div>

    <!-- extra small button  -->
    <div class="btn-group ">
        <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown">
          广东<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="">广州</a></li>
          <li><a href="">深圳</a></li>
          <li><a href="">东莞</a></li>
        </ul>      
    </div>

---

向上弹出式菜单

<div class="btn-group dropup">
        <button type="button" class="btn btn-success">广东</button>
        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="">广州</a></li>
          <li><a href="">深圳</a></li>
          <li><a href="">东莞</a></li>
        </ul>      
    </div>