每日一bootstrap 下拉菜單

下拉菜單要使用JS插件，bootstrap的JS插件是基於jquery的，所以我們同時需要加載jquery

代碼很簡單。下面貼出來

        <div class="dropdown">
          <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
            前端學習
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">jquery</a></li>
          </ul>
        </div>

dropdown是告訴這是下拉菜單。button的樣式前面提過。caret是一個圖像，一個向下的三角。我們的下拉菜單中的內容在ul中，dropdown-menu翻譯過來就是下拉菜單，這裏面重要的一行代碼是button上的

data-toggle="dropdown"

這是調用js插件，下面來說一下這個代碼
在調用js插件是我們可以使用那種動畫就引入那種插件，我們也可以一次性引入所有插件。我便是一次性引入了所有插件，雖然這個例子更適合引入單個插件。

Data 屬性
你可以僅僅通過data屬性API就能使用所有Bootstrap中的插件，而且不用寫一行JavaScript代碼。這是Bootstrap中的一等API，並且是你的首選方式。

我是用的是通過data屬性
當然也支持使用jq來寫

$('.dropdown-toggle').dropdown()