有的时候我们需要进行实现下拉菜单。实现下拉菜单我们需要引用一个类，或这是一个组件，我们为<div class="">给class赋值的是一个属性，也是一个对js里面组件的一个引用。比如当我们要使用的是下拉菜单，于是我们要应用的是下拉组件可以在最外面的块中使用class="dropdown",然后创建一个button，这个button的属性是dropdown-toggle，并且设置data-toggle=“dropdown”,当设置了这两个属性之后，我们可以设置的就是下拉菜单中每一个选项，此时的ul的属性class设置为dropdown-menu，role=“menu”，还有一个属性是aria-labelledby这个是等于上面的button的id，最后我们设置每一个li，并且li的role=“presentation”，<li>的里面是一个链接，链接的属性我们设置为menuitem，表示是下拉菜单里面的项。，最后我们也可以设置分割线:<li role="presentation" class="divider"></li>
源程序:
<!DOCTYPE html> <html> <head> <Meta charset="utf-8"> <title>Bootstrap实例</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenul" data-toggle="dropdown"> <span class="caret"></span>主题 </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenul"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Java</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"> <a role="menuitem" tabindex="-1" href="#">分离链接</a> </li> </ul> </div> </body> </html>
