标记（Markup）
需要使用.dropdown或者其它声明了 position: relative; 的元素来包容下拉触发器和下拉菜单。
<div class="dropdown"> <!-- Link or button to toggle dropdown --> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Separated link</a></li> </ul></div>
选择项（Options）
调整菜单位置
可以向.dropdown-menu添加.pull-right或.pull-left控制菜单位置。
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel"> ...</ul>
子菜单
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... <li class="dropdown-submenu"> <a tabindex="-1" href="#">More options</a> <ul class="dropdown-menu"> ... </ul> </li></ul>
上拉菜单（Dropup）
用.dropup替换.dropdown即可。
<div class="dropup"> <!-- Link or button to toggle dropdown --> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Separated link</a></li> </ul></div>
JavaScript
通过data属性
向触发下拉的链接或按钮添加data-toggle="dropdown"。
<div class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul></div>
为保持URL的完整性，用data-target替代href="#"。
<div class="dropdown"> <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page"> Dropdown <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul></div>
通过JavaScript
通过JavaScript代码激活菜单。
$('#menu').dropdown('toggle')完整例子
<div class="dropdown"> <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Separated link</a></li> </ul></div>