Bootstrap之：下拉菜单，基本用法

使用方法：

1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为:

<div class="dropdown"></div>

2、使用了一个<button>按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，此示例为:

data-toggle="dropdown"

3、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”，此示例为:

<ul class="dropdown-menu">

例如：

（1）简化版

<div class="dropdown">

　　<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">

　　选择你喜欢的水果

　　<span class="caret"></span>

　　</button>

　　<ul class="dropdown-menu">

　　　　<li><a>苹果</a></li>

　　　　<li><a>香蕉</a></li>

　　　　<li><a>葡萄</a></li>

　　　　<li><a>荔枝</a></li>

　　</ul>

</div>

（2）参数完整版

<div class="dropdown">

<button class="btn btn-default dropdown-toggle" type="button" 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"><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>