bootstrap后台管理系统模板

最新推荐文章于 2025-06-28 16:11:18 发布
原创最新推荐文章于 2025-06-28 16:11:18 发布 · 3.1k 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#bootstrap #管理
本文介绍了一个使用Bootstrap实现的侧边导航菜单系统，该菜单支持分组和折叠功能，并展示了如何通过简单的HTML和JavaScript代码来控制菜单的展开与收起状态。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>资料管理系统</title>
    <meta name="keywords" content="侧边导航菜单(可分组折叠)">
    <meta name="description" content="侧边导航菜单(可分组折叠)" />
    <meta name="HandheldFriendly" content="True" />
    <!-- Bootstrap3.3.5 CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
        .panel-group{max-height:770px;overflow-y:auto;}
        .leftMenu{margin:10px;margin-top:5px;}
        .leftMenu .panel-heading{font-size:14px;padding-left:20px;height:36px;line-height:36px;color:white;position:relative;cursor:pointer;}/*转成手形图标*/
        .leftMenu .panel-heading span{position:absolute;right:10px;top:12px;}
        .leftMenu .menu-item-left{padding: 2px; background: transparent; border:1px solid transparent;border-radius: 6px;}
        .leftMenu .menu-item-left:hover{background:#C4E3F3;border:1px solid #1E90FF;}
        body{
            padding: 0;
            margin: 0;
            overflow-x:hidden;
            background-color: #EBEFF2;
        }
        .form-group{
            margin-right: 50px;
        }
        .form-control{
            background-color: #EBEFF2;
        }
        .control-label{
            margin-right: 10px;
        }
        #form{
            margin-bottom: 20px;
        }
        th{
            text-align: center;
            background-color: #EBEFF2;
        }
        td{
            text-align: center;
        }
        #head{
            margin: auto;
            background-color: #337AB7;
            margin-bottom: 20px;
            height: 40px;
            font-weight: 700;
            font-size: 18px;
            line-height: 40px;
            color: #ffffff;
        }
        #content{
            background-color: #ffffff;
            margin-top: 6px;
            padding-top: 10px;
            width: 1120px;
            border-radius: 6px;
        }
        #contentHead{
            padding-left: 10px;
            text-align: left;
            margin: auto;
            background-color: lightblue;
            margin-bottom: 20px;
            height: 40px;
            font-weight: 700;
            font-size: 18px;
            line-height: 40px;
            color: #ffffff;
        }
        .pagination{
           float: right;
        }
    </style>
</head>

<body>
<div class="page-header text-center text-info" id="head">
    资料管理系统
</div>
    <div class="row">
        <div class="col-md-2">
            <div class="panel-group table-responsive" role="tablist">
                <div class="panel panel-primary leftMenu">
                    <!-- 利用data-target指定要折叠的分组列表 -->
                    <div class="panel-heading" id="collapseListGroupHeading1" data-toggle="collapse" data-target="#collapseListGroup1" role="tab" >
                        <h4 class="panel-title">
                            资料出入库
                            <span class="glyphicon glyphicon-chevron-up right"></span>
                        </h4>
                    </div>
                    <!-- .panel-collapse和.collapse标明折叠元素 .in表示要显示出来 -->
                    <div id="collapseListGroup1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="collapseListGroupHeading1">
                        <ul class="list-group">
                            <li class="list-group-item">
                                <!-- 利用data-target指定URL -->
                                <button class="menu-item-left" data-target="test2.html">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项1-1
                                </button>
                            </li>
                            <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项1-2
                                </button>
                            </li>
                            <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项1-3
                                </button>
                            </li>
                            <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项1-4
                                </button>
                            </li>
                            <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项1-5
                                </button>
                            </li>
                            <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项1-6
                                </button>
                            </li>
                        </ul>
                    </div>
                </div><!--panel end-->
                <div class="panel panel-primary leftMenu">
                    <div class="panel-heading" id="collapseListGroupHeading2" data-toggle="collapse" data-target="#collapseListGroup2" role="tab" >
                        <h4 class="panel-title">
                            资料借阅
                            <span class="glyphicon glyphicon-chevron-down right"></span>
                        </h4>
                    </div>
                    <div id="collapseListGroup2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading2">
                        <ul class="list-group">
                            <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项2-1
                                </button>
                            </li>
                            <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项2-2
                                </button>
                            </li>
                            <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项2-3
                                </button>
                            </li>
                            <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项2-4
                                </button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
            <div class="col-md-10" id="content">
                <div class="page-header text-center text-info" id="contentHead">
                    箱子管理
                </div>
                <form class="form-inline" role="form" id="form">
                    <div class="form-group">
                        <label class="control-label" for="name">名称</label>
                        <input type="text" class="form-control" id="name" placeholder="请输入名称">
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="name">邮箱</label>
                        <input type="text" class="form-control" id="email" placeholder="请输入邮箱">
                        <button type="submit" class="btn btn-info">提交</button>
                    </div>

                </form>
                <div class="row">
                    <div class="col-md-12">
                        <table class="table table-hover table-bordered">
                           <!-- <caption>箱子列表</caption>-->
                            <thead>
                            <tr>
                                <th>名称</th>
                                <th>城市</th>
                                <th>邮编</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>Tanmay</td>
                                <td>Bangalore</td>
                                <td>560001</td>
                            </tr>
                            <tr>
                                <td>Sachin</td>
                                <td>Mumbai</td>
                                <td>400003</td>
                            </tr>
                            <tr>
                                <td>Sachin</td>
                                <td>Mumbai</td>
                                <td>400003</td>
                            </tr><tr>
                                <td>Sachin</td>
                                <td>Mumbai</td>
                                <td>400003</td>
                            </tr><tr>
                                <td>Sachin</td>
                                <td>Mumbai</td>
                                <td>400003</td>
                            </tr><tr>
                                <td>Sachin</td>
                                <td>Mumbai</td>
                                <td>400003</td>
                            </tr><tr>
                                <td>Sachin</td>
                                <td>Mumbai</td>
                                <td>400003</td>
                            </tr>
                            <tr>
                                <td>Uma</td>
                                <td>Pune</td>
                                <td>411027</td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="row">
                            <div class="col-md-12">
                                <ul class="pagination">
                                    <li><a href="#">«</a></li>
                                    <li class="active"><a href="#">1</a></li>
                                    <li class="disabled"><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                    <li><a href="#">»</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
<!-- jQuery1.11.3 (necessary for Bo otstrap's JavaScript plugins) -->
<script src="js/jquery-1.10.1.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
    $(function(){
        $(".panel-heading").click(function(e){
            /*切换折叠指示图标*/
            $(this).find("span").toggleClass("glyphicon-chevron-down");
            $(this).find("span").toggleClass("glyphicon-chevron-up");
        });
    });
</script>
</body>

</html>