下拉菜单的使用及原理

因为Bootstrap.js是依赖jQuery来实现的，所以我们需要先加载jQuery组件。在Bootstrap中使用下拉菜单有一个非常严格的结构，如果使用不当则不能显示出下拉菜单。使用class='dropdown'的容器包裹整个下拉菜单：

将上面的代码贴到页面中运行，单击下拉菜单按钮会出现下拉菜单，再次单击该按钮下拉菜单将消失。初始状态下，下拉菜单默认是不显示的，这是因为在class='dropdown-menu'中设置了'display：none'来隐藏下拉菜单，我们可以使用chrome浏览器中的审查元素（或者Firefox中的Firebug）来查看其样式。当我们单击下拉菜单的时候，class='dropdown'上会新增一个'open'类，再次单击时'open'被移除，下拉菜单的显示与隐藏就是这样实现的。