基于SpringBoot的后台管理系统(5)主界面框架
程序员文章站
2022-03-26 14:41:42
主界面框架主页html测试效果主页html Bootstrap 实例 - 折叠面板
主页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