标签：
下拉菜单（基本用法）
在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件。当然，如果你使用的是未编译版本，在js文件夹下你能找到一个名为“dropdown.js”的文件。你也可以调用这个js文件。
注意：因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> … <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul> </div>
解析：1.使用名为dropdown的容器包裹整个下拉菜单元素
<div class="dropdown"></div>
2.使用了一个<button>按钮作为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一直
data-toggle="dropdown"
3.下拉菜单项使用一个ul列表，并且一个类名为"dropdown-menu"
<ul class="dropdown-menu">
下拉菜单（下拉分割线）
在bootstrap框架中的下拉菜单还提供了下拉分割线，假设下拉菜单有两个组，那么组与组之间可以听过添加一个空的<li>,并且给这个li添加类名"divider"来实现添加下拉分割线的功能。
下拉菜单（菜单标题）
可以给每个组添加一个头部（标题） .dropdown-header
下拉菜单（对齐方式）
实现右对齐方法：可以在dropdown-menu上添加一个pull-right或者dropdown-menu-right类名。
dropdown-menu-left：左对齐
<div class="dropdown">
<button class="btn btn-default dropdown-toggle dropdown-menu-right" type="button" id="dropdownMenu1" data-toggle="dropdown">
食物
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-left" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">水果</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>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">桃</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">蔬菜</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>
下拉菜单（菜单项状态）
下拉菜单项的默认的状态（不用设置）有悬浮状态（:hover）和焦点状态(:focus)
除了上面两种状态，还有当前状态（.active）和禁用状态（.disabled），这两种状态使用方法只需要在对应的菜单项上添加对应的类名即可。
标签：
原文地址：http://www.cnblogs.com/jodie-blog/p/5029698.html
