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>