jquery+bootstrap实现的完美的WEB主界面经典框架
效果图
代码
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
<link href="/static/bootstrap/bootstrap.min.css" rel="Stylesheet" />
<link rel="shortcut icon" href="/static/img/favicon.ico" />
<script src="/static/bootstrap/jquery.min.js" type="text/javascript"></script>
<script src="/static/bootstrap/bootstrap.min.js" type="text/javascript"></script>
<style type="text/css">
#leftbar{
width:240px;
margin:10px 0px 0px 0px;
position:absolute;
}
.page-right{
background:#ddd;
margin:-10px 0px 0px 240px;
}
.page-right-width{
margin-left:10px;
}
#leftbar a{color:#90A0AA}
#leftbar .nav-header a:hover{color:#000}
#leftbar a:hover{color:#FAFCFC}
.left-dh{
margin: 10px 0px;
}
body{
background:#DDDDDD;
}
</style>
</head>
<body>
<script>
$(document).ready(function(){
$("li.nav-header a").click(function(){
$(this).children("span").toggleClass("glyphicon-chevron-down");
$(this).children("span").toggleClass("glyphicon-chevron-right");
});
});
var flag=true;
function toggle_left(){
if(flag){
$('#collapse-left-button').css({'left':'0px','top':'0px'});
flag=false;
}else{
flag=true;
$('#collapse-left-button').css({'left':'150px','top':'15px'});
}
$('#leftbar').toggle('fast');
$('.page-right').toggleClass('page-right-width');
}
</script>
<button type="button" id="collapse-left-button" style="z-index:2;position:absolute;left:150px;top:15px;"
onclick="toggle_left()">
<span class="sr-only">切换导航</span>
<span class="glyphicon glyphicon-align-justify"></span>
</button>
<div id="leftbar" >
<nav class="navbar navbar-inverse" style="height:calc(100vh)">
<div class="navbar-header">
<a href="#" class="navbar-brand">网站后台管理</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="login" style="margin: 0px 20px 0px 0px;">
<li><a href="#"><span class="nav-text">欢迎：{{user}}</span></a></li>
<li><a href="/logout/"><sapn class="glyphicon glyphicon-log-out">注销</sapn></a></li>
</ul>
</div>
<div class="navbar-collapse collapse navbar-inverse">
<ul class="nav nav-list" id="mz" >
<li class="nav-header" style="color:#D6EAF2;"><a href="#sys" data-toggle="collapse" class="glyphicon glyphicon-cog" data-parent="#mz">
系统功能<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
<ul class="collapse nav " id="sys" style="margin-left:10px;">
<li><a href="/###/" target="main">系统管理</a></li>
<li><a href="/###/" target="main">配置文件</a></li>
<li><a href="/###/" target="main">管理员管理</a></li>
<li><a href="/###/" target="main">系统日志</a></li>
</ul>
</li>
<li class="nav-header"><a href="#lanmu" data-toggle="collapse" class="glyphicon glyphicon-th-large" data-parent="#mz">
#####<span class="glyphicon glyphicon-chevron-down pull-right "></span> </a>
<ul class="collapse nav in" id="lanmu" style="margin-left:10px;">
<li><span ></span><a class="glyphicon glyphicon-transfer" href="/###/" target="main"> #####</a></li>
<li><a class="glyphicon glyphicon-list " href="/###/" target="main"> ####</a></li>
<li><a class="glyphicon glyphicon-link " href="/###/" target="main"> ###</a></li>
<li><a class="glyphicon glyphicon-user " href="/###/" target="main"> ###</a></li>
<li><a class="glyphicon glyphicon-envelope " href="/###/" target="main"> ###</a></li>
</ul>
</li>
<li class="nav-header"><a href="#lanmu2" data-toggle="collapse" class="glyphicon glyphicon-tasks" data-parent="#mz">
###<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
<ul class="collapse nav" id="lanmu2" style="margin-left:10px;">
<li><a href="/###/" target="main">###</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<div class="page-right">
<div class="panel panel-default">
<div class="panel-body">
<div style="width:100%;height:calc(100vh - 50px);">
<iframe frameborder="0" src="/about/" id="main" name="main" scrolling="yes" width="100%" height="100%">
</iframe>
</div>
</div>
</div>
<footer class="center" style="position:fixed; bottom:0px; text-align:center; line-height:30px; margin:0 auto; width:100% ; background-color:#F5F5F5 ; height:30px;" >
2020 © Colin.
</footer>
</div>
</body>
</html>
6552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
