一、下拉菜单（基本用法）
小伙伴们注意，在Bootstrap框架中的下拉菜单组件是一个独立的组件，根据不同的版本，它对应的文件：
☑ LESS版本：对应的源码文件为 dropdowns.less
☑ Sass版本：对应的源码文件为 _dropdowns.sass
☑ 编译后的Bootstrap版本：查看bootstrap.css文件第3004行～第3130行
在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件。当然，如果你使用的是未编译版本，在js文件夹下你能找到一个名为“dropdown.js”的文件。你也可以调用这个js文件。不过在我们的教程中，我们统一调用压缩好的“bootstrap.min.js”文件：
复制代码 代码如下:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
特别声明：因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。
我们先来看官网上一个简单的示例：
<div> <button type="button" data-toggle="dropdown"> 下拉菜单 <span></span> </button> <ul role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> … <li role="presentation"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul> </div>
使用方法：
在使用Bootstrap框架中的下拉菜单组件时，其结构运用的正确与否非常的重要，如果结构和类名未使用正确，直接影响组件是否能正常运用。我们来简单的看看：
1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为:
2、使用了一个<button>按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，此示例为:
data-toggle="dropdown"
3、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”，此示例为:
<ul>
示例
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>下拉菜单</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body> <div> <button type="button" data-toggle="dropdown"> 选择你喜欢的水果 <span></span> </button> <ul role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">苹果</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">香蕉</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">梨</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">桃</a></li> </ul> </div> <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
二、下拉菜单（原理分析）
Bootstrap框架中的下拉菜单组件，其下拉菜单项默认是隐藏的，如下所示：
因为“dropdown-menu”默认样式设置了“display:none”，其详细源码请查看bootstrap.css文件第3010行～第3029行：
.dropdown-menu { position: absolute;/*设置绝对定位，相对于父元素div.dropdown*/ top: 100%;/*让下拉菜单项在父菜单项底部，如果父元素不设置相对定位，该元素相对于body元素*/ left: 0; z-index: 1000;/*让下拉菜单项不被其他元素遮盖住*/ display: none;/*默认隐藏下拉菜单项*/ float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; list-style: none; background-color: #fff; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0 6px 12px rgba(0, 0, 0, .175); }
当用户点击父菜单项时，下拉菜单将会被显示出来，当用户再次点击时，下拉菜单将继续隐藏。
原理分析：