bootstrap下拉菜单

 <div class="container">
        <div class="dropdown">
            <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">
                下拉菜单
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li class="dropdown-header">吉林省</li>
                <li><a href="#">长春市</a></li>
                <li><a href="#">吉林市</a></li>
                <li class="disabled"><a href="#">四平市</a></li>
                <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><a href="#">石家庄市</a></li>
                <li><a href="#">承德市</a></li>
            </ul>
        </div>
    </div>

    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/bootstrap.js"></script>
</body>

</html>

<!--
    .dropdown：表示该容器下面的所有元素会形成一个下拉菜单组件，如果要实现向上展开菜单，可以设置为.dropup
    data-toggle="dropdown"：该属性非常重要，可以在JS中通过该属性来操作下拉菜单
    .dropdown-menu：下拉菜单中给菜单添加的一个类，如果删除，则失去菜单样式且失去下拉和折叠功能

    
    .divider：菜单中的分割线
    .dropdown-header：将某个li设置为标题
    .disabled：禁用某个li
 -->