Bootstrap系列 -- 34. 按鈕下拉選單

 

　　按鈕下拉選單僅從外觀上看和上一節介紹的下拉選單效果基本上是一樣的。不同的是在普通的下拉選單的基礎上封裝了按鈕（.btn）樣式效果。簡單點說就是點選一個按鈕，會顯示隱藏的下拉選單。按鈕下拉選單其實就是普通的下拉選單，只不過把“<a>”標籤元素換成了“<button>”標籤元素。唯一不同的是外部容器“div.dropdown”換成了“div.btn-group”。

 

　　

<div class="btn-group">
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按鈕下拉選單<span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="##">按鈕下拉選單項</a></li>
        <li><a href="##">按鈕下拉選單項</a></li>
        <li><a href="##">按鈕下拉選單項</a></li>
        <li><a href="##">按鈕下拉選單項</a></li>
    </ul>
  </div>
  
  <div class="btn-group">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            請選擇
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a>答覆打底衫費</a></li>
            <li><a>答覆打底衫費</a></li>
            <li><a>答覆打底衫費</a></li>
            <li><a>答覆打底衫費</a></li>
        </ul>
    </div>