每日一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()