Bootstarp 下拉导航栏

最新推荐文章于 2019-07-01 22:49:30 发布

Yannis。

最新推荐文章于 2019-07-01 22:49:30 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： bootstarp 下拉框

本文链接：https://blog.youkuaiyun.com/qq_40668057/article/details/91570830

本文介绍如何利用Bootstrap框架创建一个具有下拉功能的树形菜单，详细展示了必要的组件下载、JS文件引用及HTML代码实现，适用于网页侧边栏导航的开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、下载bootstarp组件

https://v3.bootcss.com/getting-started/#download

二、添加下拉导航栏所需要的js

<link  href="/js/bootstrap-3.3.7/dist/css/bootstrap.css" rel="stylesheet">
<script src="/js/bootstrap-3.3.7/js/tests/vendor/jquery.min.js"></script>
<script src="/js/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>

三、整体代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8" />
    <title>下拉树</title>
    <link  href="/js/bootstrap-3.3.7/dist/css/bootstrap.css" rel="stylesheet">
    <script src="/js/bootstrap-3.3.7/js/tests/vendor/jquery.min.js"></script>
    <script src="/js/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<body>
        <div class="row" style="margin:0px 0px; padding:0px 0px;background:#f5f5f5;height:100%;">
            <!-- 创建菜单树 ，左侧菜单栏-->
            <div class="col-md-2  containers"  style="overflow:auto;height:100%;">
                <div class="panel-group table-responsive">
                    <%--数据资源管理--%>
                    <div class="panel panel-primary leftMenu">
                        <div class="panel-heading" style="background:#5886d1;" id="列表组标题1" data-toggle="collapse" data-target="#列表组1" role="tab" >
                            <h3 class="panel-title">
                                <span class="glyphicon glyphicon-book">&nbsp;&nbsp;数据资源管理</span>
                            </h3>
                        </div>
                        <div id="列表组1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="列表组标题1">
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <a href="javascript:void(0)">
                                        <span class="glyphicon glyphicon-tag" >&nbsp;&nbsp;&nbsp;既有物管理</span>
                                    </a>
                                </li>

                                <li class="list-group-item">
                                    <a href="javascript:void(0)">
                                        <span class="glyphicon glyphicon-tag" >&nbsp;&nbsp;&nbsp;地理编码管理</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <%--系统管理--%>
                    <div class="panel panel-primary leftMenu">
                        <div class="panel-heading" style="background:#5886d1;" id="列表组标题2" data-toggle="collapse" data-target="#列表组2" role="tab" >
                            <h3 class="panel-title">
                                <span class="glyphicon glyphicon-book">&nbsp;&nbsp;&nbsp;系统管理</span>
                            </h3>
                        </div>
                        <div id="列表组2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="列表组标题2">
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <a href="javascript:void(0)">
                                        <span class="glyphicon glyphicon-tag" >&nbsp;&nbsp;&nbsp;&nbsp;部门管理</span>
                                    </a>
                                </li>
                                <li class="list-group-item">
                                    <a href="javascript:void(0)">
                                        <span class="glyphicon glyphicon-tag" >&nbsp;&nbsp;&nbsp;&nbsp;人员管理</span>
                                    </a>
                                </li>

                                <li class="list-group-item">
                                    <a href="javascript:void(0)">
                                        <span class="glyphicon glyphicon-tag" >&nbsp;&nbsp;&nbsp;&nbsp;角色管理</span>
                                    </a>
                                </li>

                                <li class="list-group-item">
                                    <a href="javascript:void(0)">
                                        <span class="glyphicon glyphicon-tag" >&nbsp;&nbsp;&nbsp;&nbsp;线路分配</span>
                                    </a>
                                </li>

                                <li class="list-group-item">
                                    <a href="javascript:void(0)">
                                        <span class="glyphicon glyphicon-tag" >&nbsp;&nbsp;&nbsp;&nbsp;数据字典</span>
                                    </a>
                                </li>

                                <li class="list-group-item">
                                    <a href="javascript:void(0)">
                                        <span class="glyphicon glyphicon-tag" >&nbsp;&nbsp;&nbsp;系统日志管理</span>
                                    </a>
                                </li>

                                <li class="list-group-item">
                                    <a href="javascript:void(0)">
                                        <span class="glyphicon glyphicon-tag" >&nbsp;&nbsp;&nbsp;&nbsp;惯用语管理</span>
                                    </a>
                                </li>

                                <li class="list-group-item">
                                    <a href="javascript:void(0)">
                                        <span class="glyphicon glyphicon-tag" >&nbsp;&nbsp;&nbsp;&nbsp;节假日管理</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</body>

</html>

五、运行结果