Bootstrap中的下拉菜单组件

Bootstrap中的下拉菜单组件是经常在开发阶段中遇到的，点击一下显示下拉菜单，不需要写JS代码，只用几个css就可以解决，当然你还要引用以下的文件：

如果您想要单独引用该插件的功能，那么您需要引用 dropdown.js。或者您可以引用 bootstrap.js 或压缩版的bootstrap.min.js

<div class="container">    <h3>组件---下拉菜单  <span class="caret"></span>   </h3>    <!--dropdown只是相对定位relation，为子元素做准备-->    <div class="dropdown">        <!--a为触发元素-->        <a  data-toggle="dropdown" href="#" class="btn btn-default">            产品大全<span class="glyphicon glyphicon-menu-down"></span>        </a>        <!--隐藏元素是绝对定位-->        <ul class="dropdown-menu">            <li class="dropdown-header">家电</li>            <li><a href="#">电视</a></li>            <li><a href="#">洗衣机</a></li>            <li><a href="#">冰箱</a></li>            <li class="dropdown-header">母婴</li>            <li class="divider"></li>            <li><a href="#">止尿裤</a></li>            <li><a href="#">尿不湿</a></li>        </ul>    </div><h3>提示：divider----分割线   dropdown-header----下拉列表的列表头    </h3></div>