HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>首页 - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v4.3.1的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="http://lyear.itshubao.com/iframe/v4/css/bootstrap.min.css" rel="stylesheet">
<link href="http://example.itshubao.com/demo/css/materialdesignicons.min.css" rel="stylesheet">
<link href="http://lyear.itshubao.com/iframe/v4/js/bootstrap-multitabs/multitabs.min.css" rel="stylesheet">
<link href="http://lyear.itshubao.com/iframe/v4/css/style.min.css" rel="stylesheet">
<style>
.lyear-topbar .nav-link {
padding: 0 1rem;
line-height: 30px;
color: inherit;
}
.lyear-topbar .active .nav-link {
color: #33cabb; /* 这里演示，作为蓝绿色，如果整体颜色为蓝色的，改成蓝色#007bff */
}
@media screen and (max-width: 980px) {
.header-icon-menu {
display: block;
height: 68px;
line-height: 68px;
font-size: 1.5em;
cursor: pointer;
padding: 0 12px;
text-align: center;
}
.navbar-left .lyear-topbar li {
float: none;
}
.lyear-topbar .active .nav-link {
color: #fff;
}
}
@media (min-width: 980px) {
.header-icon-menu {
display: none;
}
.navbar-left .lyear-topbar {
display: block;
position: inherit;
top: 0px;
box-shadow: none;
background-color: transparent;
padding: 0px;
margin: 0px;
}
.navbar-left .lyear-topbar .dropdown-item {
display: inline-block;
width: auto;
padding: 0px;
}
.navbar-left .lyear-topbar .dropdown-item.active,
.navbar-left .lyear-topbar .dropdown-item:active {
background-color: transparent;
}
.navbar-left .lyear-topbar .dropdown-item:hover,
.navbar-left .lyear-topbar .dropdown-item:focus {
background-color: transparent;
}
[data-headerbg*='color_'] .navbar-left .lyear-topbar a {
color: rgba(255, 255, 255, .75);
}
[data-headerbg*='color_'] .navbar-left .lyear-topbar a:focus,
[data-headerbg*='color_'] .navbar-left .lyear-topbar a:hover {
color: #fff;
}
[data-headerbg*='color_'] .navbar-left .lyear-topbar>.active>a,
[data-headerbg*='color_'] .navbar-left .lyear-topbar>.active>a:focus,
[data-headerbg*='color_'] .navbar-left .lyear-topbar>.active>a:hover {
color: #fff;
}
}
</style>
</head>
<body>
<div class="lyear-layout-web">
<div class="lyear-layout-container">
<!--左侧导航-->
<aside class="lyear-layout-sidebar">
<!-- logo -->
<div id="logo" class="sidebar-header">
<a href="index.html"><img src="http://lyear.itshubao.com/iframe/v4/images/logo-sidebar.png" title="LightYear" alt="LightYear" /></a>
</div>
<div class="lyear-layout-sidebar-info lyear-scroll">
<nav class="sidebar-main">
<ul class="nav-drawer" id="menus-1"> <!--默认菜单内容-->
<li class="nav-item active"> <a class="multitabs" href="lyear_main.html"><i class="mdi mdi-home"></i> <span>后台首页</span></a> </li>
<li class="nav-item nav-item-has-subnav">
<a href="javascript:void(0)"><i class="mdi mdi-palette"></i> <span>UI 元素</span></a>
<ul class="nav nav-subnav">
<li> <a class="multitabs" href="lyear_ui_buttons.html">按钮</a> </li>
<li> <a class="multitabs" href="lyear_ui_cards.html">卡片</a> </li>
<li> <a class="multitabs" href="lyear_ui_grid.html">格栅</a> </li>
<li> <a class="multitabs" href="lyear_ui_icons.html">图标</a> </li>
<li> <a class="multitabs" href="lyear_ui_tables.html">表格</a> </li>
<li> <a class="multitabs" href="lyear_ui_modals.html">模态框</a> </li>
<li> <a class="multitabs" href="lyear_ui_tooltips_popover.html">提示 / 弹出框</a> </li>
<li> <a class="multitabs" href="lyear_ui_alerts.html">警告框</a> </li>
<li> <a class="multitabs" href="lyear_ui_pagination.html">分页</a> </li>
<li> <a class="multitabs" href="lyear_ui_progress.html">进度条</a> </li>
<li> <a class="multitabs" href="lyear_ui_tabs.html">标签页</a> </li>
<li> <a class="multitabs" href="lyear_ui_typography.html">排版</a> </li>
<li> <a class="multitabs" href="lyear_ui_step.html">步骤</a> </li>
<li> <a class="multitabs" href="lyear_ui_other.html">其他</a> </li>
</ul>
</li>
<li class="nav-item nav-item-has-subnav">
<a href="javascript:void(0)"><i class="mdi mdi-format-align-justify"></i> <span>表单</span></a>
<ul class="nav nav-subnav">
<li> <a class="multitabs" href="lyear_forms_elements.html">基本元素</a> </li>
<li> <a class="multitabs" href="lyear_forms_radio.html">单选框</a> </li>
<li> <a class="multitabs" href="lyear_forms_checkbox.html">复选框</a> </li>
<li> <a class="multitabs" href="lyear_forms_switch.html">开关</a> </li>
</ul>
</li>
</ul>
<ul class="nav-drawer collapse" id="menus-2"> <!--第三个菜单内容-->
<li class="nav-item nav-item-has-subnav">
<a href="javascript:void(0)"><i class="mdi mdi-file-outline"></i> <span>示例页面</span></a>
<ul class="nav nav-subnav">
<li> <a class="multitabs" href="lyear_pages_doc.html">文档列表</a> </li>
<li> <a class="multitabs" href="lyear_pages_gallery.html">图库列表</a> </li>
<li> <a class="multitabs" href="lyear_pages_config.html">网站配置</a> </li>
<li> <a class="multitabs" href="lyear_pages_rabc.html">设置权限</a> </li>
<li> <a class="multitabs" href="lyear_pages_add_doc.html">新增文档</a> </li>
<li> <a class="multitabs" href="lyear_pages_guide.html">表单向导</a> </li>
<li> <a class="multitabs" href="lyear_pages_data_table.html">表格插件</a> </li>
<li> <a href="lyear_pages_login.html" target="_blank">登录页面</a> </li>
<li> <a href="lyear_pages_error.html" target="_blank">错误页面</a> </li>
</ul>
</li>
</ul>
<ul class="nav-drawer collapse" id="menus-3"> <!--第三个菜单内容-->
<li class="nav-item nav-item-has-subnav">
<a href="javascript:void(0)"><i class="mdi mdi-language-javascript"></i> <span>JS 插件</span></a>
<ul class="nav nav-subnav">
<li> <a class="multitabs" href="lyear_js_datepicker.html">日期选取器</a> </li>
<li> <a class="multitabs" href="lyear_js_sliders.html">滑块</a> </li>
<li> <a class="multitabs" href="lyear_js_colorpicker.html">选色器</a> </li>
<li> <a class="multitabs" href="lyear_js_chartjs.html">Chart.js</a> </li>
<li> <a class="multitabs" href="lyear_js_jconfirm.html">对话框</a> </li>
<li> <a class="multitabs" href="lyear_js_tags_input.html">标签插件</a> </li>
<li> <a class="multitabs" href="lyear_js_notify.html">通知消息</a> </li>
</ul>
</li>
<li class="nav-item nav-item-has-subnav">
<a href="javascript:void(0)"><i class="mdi mdi-menu"></i> <span>多级菜单</span></a>
<ul class="nav nav-subnav">
<li> <a href="#!">一级菜单</a> </li>
<li class="nav-item nav-item-has-subnav">
<a href="#!">一级菜单</a>
<ul class="nav nav-subnav">
<li> <a href="#!">二级菜单</a> </li>
<li class="nav-item nav-item-has-subnav">
<a href="#!">二级菜单</a>
<ul class="nav nav-subnav">
<li> <a href="#!">三级菜单</a> </li>
<li> <a href="#!">三级菜单</a> </li>
</ul>
</li>
</ul>
</li>
<li> <a href="#!">一级菜单</a> </li>
</ul>
</li>
</ul>
</nav>
<div class="sidebar-footer">
<p class="copyright">Copyright © 2019. <a target="_blank" href="http://lyear.itshubao.com">IT书包</a> All rights reserved.</p>
</div>
</div>
</aside>
<!--End 左侧导航-->
<!--头部信息-->
<header class="lyear-layout-header">
<nav class="navbar">
<div class="navbar-left d-flex align-items-center">
<div class="lyear-aside-toggler">
<span class="lyear-toggler-bar"></span>
<span class="lyear-toggler-bar"></span>
<span class="lyear-toggler-bar"></span>
</div>
<div class="dropdown">
<span class="header-icon-menu" data-toggle="dropdown"><i class="mdi mdi-apps"></i></span>
<ul class="lyear-topbar dropdown-menu">
<li class="dropdown-item active">
<a class="nav-link" href="javascript:void(0)" onclick="showMenus(this, 1)">默认</a>
</li>
<li class="dropdown-item">
<a class="nav-link" href="javascript:void(0)" onclick="showMenus(this, 2)">菜单一</a>
</li>
<li class="dropdown-item">
<a class="nav-link" href="javascript:void(0)" onclick="showMenus(this, 3)">菜单二</a>
</li>
</ul>
</div>
</div>
<ul class="navbar-right d-flex align-items-center">
<!--切换主题配色-->
<li class="dropdown dropdown-profile">
<a href="javascript:void(0)" data-toggle="dropdown" class="dropdown-toggle">
<img class="img-avatar img-avatar-48 m-r-10" src="http://lyear.itshubao.com/iframe/v4/images/users/avatar.jpg" alt="笔下光年" />
<span>笔下光年</span>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<a class="multitabs dropdown-item" data-url="lyear_pages_profile.html" href="javascript:void(0)"><i class="mdi mdi-account"></i> 个人信息</a>
</li>
<li>
<a class="multitabs dropdown-item" data-url="lyear_pages_edit_pwd.html" href="javascript:void(0)"><i class="mdi mdi-lock-outline"></i> 修改密码</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a>
</li>
<li class="dropdown-divider"></li>
<li>
<a class="dropdown-item" href="lyear_pages_login_1.html"><i class="mdi mdi-logout-variant"></i> 退出登录</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
<!--End 头部信息-->
<!--页面主要内容-->
<main class="lyear-layout-content">
<div id="iframe-content"></div>
</main>
<!--End 页面主要内容-->
</div>
</div>
<script type="text/javascript" src="http://lyear.itshubao.com/iframe/v4/js/jquery.min.js"></script>
<script type="text/javascript" src="http://lyear.itshubao.com/iframe/v4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://lyear.itshubao.com/iframe/v4/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="http://lyear.itshubao.com/iframe/v4/js/bootstrap-multitabs/multitabs.js"></script>
<script type="text/javascript" src="http://lyear.itshubao.com/iframe/v4/js/jquery.cookie.min.js"></script>
<script type="text/javascript" src="http://lyear.itshubao.com/iframe/v4/js/index.min.js"></script>
<script type="text/javascript">
function showMenus(obj, id)
{
$('.sidebar-main .nav-drawer').slideUp('slow');
$('#menus-'+id).slideDown('slow');
$(obj).parent('li').addClass('active').siblings().removeClass('active');
$('.lyear-scroll').animate({scrollTop: 0}, 300); // 处理滚动条到最上方
}
</script>
</body>
</html>