当前位置： 移动技术网 > IT编程>开发语言>Java > 基于SpringBoot的后台管理系统（5）主界面框架

基于SpringBoot的后台管理系统（5）主界面框架

2020年07月09日  | 移动技术网IT编程  | 我要评论

主界面框架

主页html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 折叠面板</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>

        .row.no-gutter {
            margin-left: -15px;
            margin-right: -15px;
        }
        .row.no-gutter > [class*='col-'] {
            padding-right: 0;
            padding-left: 0;
        }
    </style>
</head>
<div class="container-fluid">
    <div class="row clearfix no-gutter">
        <div class="col-md-1 column">
            <div class="title_left" style="height: 50px; background-color: #2e6da4">
                <div class="col-md-12">
                    <p style="color: white;padding-left: 30px;padding-top: 15px">zhanghw</p>
                </div>
            </div>
        </div>
        <div class="col-md-11 column">
            <div class="title_right" style="height: 50px; background-color: #337ab7">
                <div class="col-md-10">
                    <p style="color: white;padding-left: 30px;padding-top: 15px"></p>
                </div>
                <div class="col-md-1">
                    <img src="../image/user.png" class="img-circle" style="margin-left: 120px;margin-top: 10px;">
                </div>
                <div class="col-md-1">
                    <p style="color: white;padding-left: 30px;padding-top: 15px">zhanghw</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row clearfix no-gutter">
        <div class="col-md-1 column">
            <div class="body_left" style="height: 890px; background-color: #1b6d85">
                <div class="panel-group" id="accordion" style="background-color: #1b6d85;margin-left: 25px;padding: 0px;border: #1b6d85">
                    <div class="panel panel-default" style="background-color: #1b6d85;border: #1b6d85">
                        <div class="panel-heading" style="background-color: #1b6d85;border: #1b6d85">
                            <h4 class="panel-title" style="background-color: #1b6d85;border: #1b6d85">
                                <a data-toggle="collapse" data-parent="#accordion"
                                   href="#collapseOne">
                                    <p style="color: white;background-color: #1b6d85;margin: 0px;padding: 0px;">我的主页</p>
                                </a>
                            </h4>
                        </div>
                        <div id="collapseOne" class="panel-collapse collapse" style="margin: 0px;padding: 0px;background-color: #1b6d85;border: #1b6d85">
                            <div class="panel-body" style="margin: 0px;padding: 0px; background-color: #1b6d85;border: #1b6d85">
                                <div class="panel-body" style="margin: 0px;padding: 0px; background-color: #1b6d85;border: #1b6d85">
                                    <a href="#tab_zhanghw" data-toggle="tab" class="list-group-item" style="background-color: #1b6d85; border: #1b6d85; color: white;margin-left: 15px;">zhanghw</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="panel panel-default" style="background-color: #1b6d85;border: #1b6d85">
                        <div class="panel-heading" style="background-color: #1b6d85;border: #1b6d85">
                            <h4 class="panel-title" style="background-color: #1b6d85;border: #1b6d85">
                                <a data-toggle="collapse" data-parent="#accordion"
                                   href="#collapseTwo">
                                    <p style="color: white;background-color: #1b6d85;margin: 0px;padding: 0px;">系统管理</p>
                                </a>
                            </h4>
                        </div>
                        <div id="collapseTwo" class="panel-collapse collapse" style="margin: 0px;padding: 0px;background-color: #1b6d85;border: #1b6d85">
                            <div class="panel-body" style="margin: 0px;padding: 0px; background-color: #1b6d85;border: #1b6d85">
                                <a href="#tab_userMgr" data-toggle="tab" class="list-group-item" style="background-color: #1b6d85; border: #1b6d85; color: white;margin-left: 15px;">用户管理</a>
                                <a href="#" class="list-group-item" style="background-color: #1b6d85; border: #1b6d85; color: white;margin-left: 15px;">角色管理</a>
                                <a href="#" class="list-group-item" style="background-color: #1b6d85; border: #1b6d85; color: white;margin-left: 15px;">菜单管理</a>
                                <a href="#" class="list-group-item" style="background-color: #1b6d85; border: #1b6d85; color: white;margin-left: 15px;">部门管理</a>
                                <a href="#" class="list-group-item" style="background-color: #1b6d85; border: #1b6d85; color: white;margin-left: 15px;">岗位管理</a>
                                <a href="#" class="list-group-item" style="background-color: #1b6d85; border: #1b6d85; color: white;margin-left: 15px;">菜单管理</a>
                                <a href="#" class="list-group-item" style="background-color: #1b6d85; border: #1b6d85; color: white;margin-left: 15px;">参数设置</a>
                                <a href="#" class="list-group-item" style="background-color: #1b6d85; border: #1b6d85; color: white;margin-left: 15px;">通知公告</a>
                                <a href="#" class="list-group-item" style="background-color: #1b6d85; border: #1b6d85; color: white;margin-left: 15px;">日志管理</a>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default" style="background-color: #1b6d85;border: #1b6d85">
                        <div class="panel-heading" style="background-color: #1b6d85;border: #1b6d85">
                            <h4 class="panel-title" style="background-color: #1b6d85;border: #1b6d85">
                                <a data-toggle="collapse" data-parent="#accordion"
                                   href="#collapseThree">
                                    <p style="color: white;background-color: #1b6d85;margin: 0px;padding: 0px;">系统监控</p>
                                </a>
                            </h4>
                        </div>
                        <div id="collapseThree" class="panel-collapse collapse" style="margin: 0px;padding: 0px;background-color: #1b6d85;border: #1b6d85">
                            <div class="panel-body" style="margin: 0px;padding: 0px; background-color: #1b6d85;border: #1b6d85">
                                <div class="panel-body" style="margin: 0px;padding: 0px; background-color: #1b6d85;border: #1b6d85">
                                    <a href="#" class="list-group-item" style="background-color: #1b6d85; border: #1b6d85; color: white;margin-left: 15px;">在线用户</a>
                                    <a href="#" class="list-group-item" style="background-color: #1b6d85; border: #1b6d85; color: white;margin-left: 15px;">定时任务</a>
                                    <a href="#" class="list-group-item" style="background-color: #1b6d85; border: #1b6d85; color: white;margin-left: 15px;">数据监控</a>
                                    <a href="#" class="list-group-item" style="background-color: #1b6d85; border: #1b6d85; color: white;margin-left: 15px;">服务监控</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-11 column">
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade" id="tab_zhanghw">
                    <p>因为你有你的人生，我有我的旅程--叶倩文</p>
                </div>
                <div class="tab-pane fade" id="tab_userMgr">
                    <p>任你怎说安守我本分，始终相信沉默是金--张国荣</p>
                </div>
                <div class="tab-pane fade in active" id="jmeter">
                    <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
                </div>
                <div class="tab-pane fade" id="ejb">
                    <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<body>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="../../static/js/bootstrap.min.js"></script>
</body>
</html>

测试效果

在这里插入图片描述

本文地址：https://blog.csdn.net/u010906468/article/details/107166357

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网