Bootstrap实现下拉菜单

最新推荐文章于 2024-07-18 06:15:09 发布

゛。

最新推荐文章于 2024-07-18 06:15:09 发布

阅读量877

点赞数 1

文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/qq_52104411/article/details/123955544

版权

如图：点击按钮会出现三个选项。

1、代码段

<div class="dropdown">
        <button type="button" class="btn btn-primary" data-toggle="dropdown">前端
            <span class="caret"></span>
            <!-- 出现箭头样式 -->
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">
                    后端
                </a></li>
            <li><a href="#">
                    架构
                </a></li>
            <li><a href="#">
                    全栈
                </a></li>
            <!-- 使用a标签可以让列表文字之间有距离 -->
        </ul>

    </div>
    <!-- data-toggle="dropdown"是一个事件需要引入js才能执行 -->
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>