我们接下来要学习的东西呢，是Bootstrap为我们提供的一些组件，这些组件的使用非常简单，可以方便快捷帮助我们搭建网站，并且能达到一个不错的显示效果。我们最需要注意的就是： HTML的结构 和bootstrap提供 添加到结构上的类以及属性 。
这些组件的交互功能是依赖于jQuery库实现的，所以还必须引入jQuery.js，且必须在Bootstrap.js之前。正式上线的话直接使用压缩版本就可以了如下：
<script src="../js/jquery-min-1.11.3.js"></script><script src="../js/bootstrap.min.js"></script>
在官方文档中，我们看到的下拉菜单组件是这样的：
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 下拉菜单<span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">菜单项1</a></li> <li><a href="#">菜单项2</a></li> </ul></div>
那么，到底哪一些属性是必须的、用来控制行为的呢？又有哪一部分是起到修饰作用的？
我们来自己简化一下这一段代码：
<div class="dropdown"> <button class="dropdown-toggle"data-toggle="dropdown">下拉菜单</button> <ul class="dropdown-menu" > <li>菜单项1</li> <li>菜单项2</li> </ul></div>
我们来看看简化前后的对比图：
在使用Bootstrap框架中的下拉菜单组件时，其结构运用的正确与否非常的重要，如果结构和类名未使用正确，直接影响组件是否能正常运用。经过我们上面的简化，最终可以看到核心要求有以下几点：
也就是说，我们仅仅需要牢记这3个步骤我们就可以使下拉菜单生效，
那么这些是怎么起作用的呢？
查看CSS源码可以看到 .dropdown-menu 有一个 display:none ，所以下拉列表项默认隐藏的；我们继续打开chrome开发者工具（F12），可以看到每一次在列表项展现出来时， .dropdown 类后还增加了一个 .open 的类；不用多说想肯定就是这个类在起作用，我们再继续回到CSS源码中去可以看到：
.open > .dropdown-menu { display: block;}看到这里也应该不用过多说明了，添加了这个 .open 类时， .dropdown-menu 自然的就显示出来了。
在Bootstrap框架中的下拉菜单还提供了下拉分隔线，假设下拉菜单有两个组，那么组与组之间可以通过添加一个 空 的
.dropdown-menu .divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5;}上一小节讲解通过添加 divider 可以将下拉菜单分组，为了让这个分组更明显，还可以给每个组添加一个头部（标题）：
从源码中比较关键的两个点是：标题的字体颜色是： color: #777; ，还有内填充 padding: 3px 20px;
Bootstrap框架中下拉菜单 默认是左对齐 也就是添加 .dropdown-menu-left 类所能达到的效果，如果你想让下拉菜单 相对于父容器右对齐 时，可以在 .dropdown-menu 上（也就是你的菜单项的ul）添加一个 .pull-right 或者 .dropdown-menu-right 类名，如下所示：
