bootstrap中的dropdown

最新推荐文章于 2023-07-23 12:13:17 发布

原创最新推荐文章于 2023-07-23 12:13:17 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #dropdown #下拉菜单

本文详细介绍了如何使用HTML和CSS创建一个包含子菜单的下拉菜单，包括基本结构、事件触发及样式美化。

dropdown的下拉试验（带子菜单）：

<div class="dropdown">
    	<a class="dropdown-toggle" data-toggle="dropdown">下拉<span class="caret"></span></a>
                                                                                             
    	<ul class="dropdown-menu" role="menu" arie-labelledby="dropdownMenu">
        	<li><a tabindex="-1">111</a></li>
            <li class="disabled"><a tabindex="-1">222</a></li>
            <li><a tabindex="-1">333</a></li>
            <li class="divider"></li>
            <li class="dropdown-submenu">
            	<a href="#" tabindex="-1">更多哦！</a>
                <ul class="dropdown-menu">
                	<li><a tabindex="-1">444</a></li>
                     <li><a tabindex="-1">555</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

注意：在写的时候注意加上<script>事件，去触发js和css。

效果图：