1 <div class="dropdown"> 2 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 3 下拉菜单 4 <span class="caret"></span> 5 </button> 6 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 7 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> 8 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> 9 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> 10 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> 11 </ul> 12 </div>
如上代码，是一个最基本的下拉菜单。效果如图所示：
1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为:
<div class="dropdown"></div>
2、使用了一个<button>按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，此示例为:
data-toggle="dropdown"
3、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”，此示例为:
<ul class="dropdown-menu">
<span class="caret"></span>为右边的倒三角符号
<li role="presentation" class="divider"></li>插入控li，并加上类名divider，可实现分割线
<li role="presentation" class="dropdown-header">第一部分菜单头部</li>在li里加上dropdown-header，实现标题
Bootstrap框架中下拉菜单默认是左对齐，如果你想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名
下拉菜单项的默认的状态（不用设置）有悬浮状态（:hover）和焦点状态（:focus）， 下拉菜单项除了上面两种状态，还有当前状态（.active）和禁用状态（.disabled）。这两种状态使用方法只需要在对应的菜单项上添加对应的类名