bootstrap-11

下拉菜单（基本用法）

　　在使用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），这两种状态使用方法只需要在对应的菜单项上添加对应的类名即可。