标记(Markup)
需要使用.dropdown或者其它声明了 position: relative; 的元素来包容下拉触发器和下拉菜单。
[html]
<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控制菜单位置。
[html]
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
...
</ul>
子菜单
[html]
<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即可。
[html]
<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> www.zzzyk.com
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
完整例子
[html]
<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>