首页布局
HTML
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<!-- begin::Head -->
<head>
<meta charset="utf-8" />
<title>
后台管理 | 控制面板
</title>
<meta name="description" content="Latest updates and statistic charts">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--begin::Base Styles -->
<!--begin::Page Vendors -->
<link href="/assets/vendors/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
<!--end::Page Vendors -->
<link href="/assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
<link href="/assets/demo/default/base/style.bundle.css" rel="stylesheet" type="text/css" />
<link href="/assets/custom/style.css" rel="stylesheet" type="text/css" />
<!--end::Base Styles -->
<link rel="shortcut icon" href="/assets/demo/default/media/img/logo/favicon.ico" />
</head>
<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default" >
<div class="m-grid m-grid--hor m-grid--root m-page">
<header class="m-grid__item m-header " data-minimize-offset="200" data-minimize-mobile-offset="200">
<div class="m-container m-container--fluid m-container--full-height">
<div class="m-stack m-stack--ver m-stack--desktop">
<!-- BEGIN: Brand -->
<div class="m-stack__item m-brand m-brand--skin-dark ">
<div class="m-stack m-stack--ver m-stack--general">
<div class="m-stack__item m-stack__item--middle m-brand__logo">
<a href="index.html" class="m-brand__logo-wrapper"> <img alt="" src="assets/demo/default/media/img/logo/logo_default_dark.png" /> </a>
</div>
<div class="m-stack__item m-stack__item--middle m-brand__tools">
<!-- BEGIN: Left Aside Minimize Toggle -->
<a href="javascript:;" id="m_aside_left_minimize_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-desktop-inline-block"> <span></span> </a>
<!-- END -->
<!-- BEGIN: Responsive Aside Left Menu Toggler -->
<a href="javascript:;" id="m_aside_left_offcanvas_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-tablet-and-mobile-inline-block"> <span></span> </a>
<!-- END -->
<!-- BEGIN: Responsive Header Menu Toggler -->
<a id="m_aside_header_menu_mobile_toggle" href="javascript:;" class="m-brand__icon m-brand__toggler m--visible-tablet-and-mobile-inline-block"> <span></span> </a>
<!-- END -->
<!-- BEGIN: Topbar Toggler -->
<a id="m_aside_header_topbar_mobile_toggle" href="javascript:;" class="m-brand__icon m--visible-tablet-and-mobile-inline-block"> <i class="flaticon-more"></i> </a>
<!-- BEGIN: Topbar Toggler -->
</div>
</div>
</div>
<!-- END: Brand -->
<div class="m-stack__item m-stack__item--fluid m-header-head" id="m_header_nav">
<!-- BEGIN: Horizontal Menu -->
<button class="m-aside-header-menu-mobile-close m-aside-header-menu-mobile-close--skin-dark " id="m_aside_header_menu_mobile_close_btn"> <i class="la la-close"></i> </button>
<!-- END: Horizontal Menu -->
<!-- BEGIN: Topbar -->
<div id="m_header_topbar" class="m-topbar m-stack m-stack--ver m-stack--general">
<div class="m-stack__item m-topbar__nav-wrapper">
<ul class="m-topbar__nav m-nav m-nav--inline">
<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click"> <a href="#" class="m-nav__link m-dropdown__toggle"> <span class="m-topbar__userpic"> <img src="assets/app/media/img/users/user4.jpg" class="m--img-rounded m--marginless m--img-centered" alt="" /> </span> <span class="m-topbar__username m--hide"> Nick </span> </a>
<div class="m-dropdown__wrapper">
<span class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust"></span>
<div class="m-dropdown__inner">
<div class="m-dropdown__header m--align-center" style="background: url(/assets/app/media/img/misc/user_profile_bg.jpg); background-size: cover;">
<div class="m-card-user m-card-user--skin-dark">
<div class="m-card-user__pic">
<img src="/assets/app/media/img/users/user4.jpg" class="m--img-rounded m--marginless" alt="" />
</div>
<div class="m-card-user__details">
<span class="m-card-user__name m--font-weight-500"> Mark Andre </span>
<a href="" class="m-card-user__email m--font-weight-300 m-link"> mark.andre@gmail.com </a>
</div>
</div>
</div>
<div class="m-dropdown__body">
<div class="m-dropdown__content">
<ul class="m-nav m-nav--skin-light">
<li class="m-nav__section m--hide"> <span class="m-nav__section-text"> Section </span> </li>
<li class="m-nav__item">
<a href="header/profile.html" class="m-nav__link">
<i class="m-nav__link-icon flaticon-profile-1"></i>
<span class="m-nav__link-title">
<span class="m-nav__link-wrap">
<span class="m-nav__link-text">个人信息</span>
</span>
</span>
</a>
</li>
<li class="m-nav__separator m-nav__separator--fit"></li>
<li class="m-nav__item"> <a href="snippets/pages/user/login-1.html" class="btn m-btn--pill btn-secondary m-btn m-btn--custom m-btn--label-brand m-btn--bolder"> 注销 </a> </li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- END: Topbar -->
</div>
</div>
</div>
</header>
<!-- begin :: body -->
<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-body">
<button class="m-aside-left-close m-aside-left-close--skin-dark " id="m_aside_left_close_btn">
<i class="la la-close"></i>
</button>
<div id="m_aside_left" class="m-grid__item m-aside-left m-aside-left--skin-dark ">
<!-- BEGIN: Aside Menu -->
<div id="m_ver_menu" class="m-aside-menu m-aside-menu--skin-dark m-aside-menu--submenu-skin-dark " data-menu-vertical="true" data-menu-scrollable="false" data-menu-dropdown-timeout="500">
<ul class="m-menu__nav m-menu__nav--dropdown-submenu-arrow ">
<li class="m-menu__item m-menu__item--active" aria-haspopup="true">
<a href="/main" class="m-menu__link ">
<i class="m-menu__link-icon flaticon-line-graph"></i>
<span class="m-menu__link-title">
<span class="m-menu__link-wrap">
<span class="m-menu__link-text">控制面板</span>
</span>
</span>
</a>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-layers"></i>
<span class="m-menu__link-text">内容管理</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item " aria-haspopup="true"> <a href="components/base/state.html" class="m-menu__link "> <i class="m-menu__link-bullet m-menu__link-bullet--dot"> <span></span> </i> <span class="m-menu__link-text"> 频道管理 </span> </a> </li>
<li class="m-menu__item " aria-haspopup="true"> <a href="components/base/typography.html" class="m-menu__link "> <i class="m-menu__link-bullet m-menu__link-bullet--dot"> <span></span> </i> <span class="m-menu__link-text"> 文章管理 </span> </a> </li>
</ul>
</div>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-settings-1"></i>
<span class="m-menu__link-text">系统设置</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item " aria-haspopup="true"> <a href="components/base/state.html" class="m-menu__link "> <i class="m-menu__link-bullet m-menu__link-bullet--dot"> <span></span> </i> <span class="m-menu__link-text"> 字典管理 </span> </a> </li>
</ul>
</div>
</li>
</ul>
</div>
<!-- END: Aside Menu -->
</div>
<div class="m-grid__item m-grid__item--fluid m-wrapper">
<!-- BEGIN: Subheader -->
<div class="m-subheader ">
<div class="d-flex align-items-center">
<div class="mr-auto">
<h3 class="m-subheader__title ">控制面板</h3>
</div>
</div>
</div>
<!-- END: Subheader -->
<div class="m-content">
</div>
</div>
</div>
<!-- end :: body -->
<!-- begin::Footer -->
<footer class="m-grid__item m-footer ">
<div class="m-container m-container--fluid m-container--full-height m-page__container">
<div class="m-stack m-stack--flex-tablet-and-mobile m-stack--ver m-stack--desktop">
<div class="m-stack__item m-stack__item--left m-stack__item--middle m-stack__item--last">
<span class="m-footer__copyright">2018 © by
<a href="#" class="m-link">Lusifer</a>
</span>
</div>
</div>
</div>
</footer>
<!-- end::Footer -->
</div>
<!-- end:: Page -->
<!-- begin::Scroll Top -->
<div class="m-scroll-top m-scroll-top--skin-top" data-toggle="m-scroll-top" data-scroll-offset="500" data-scroll-speed="300">
<i class="la la-arrow-up"></i>
</div>
<!-- end::Scroll Top -->
<!--begin::Base Scripts -->
<script src="/assets/vendors/base/vendors.bundle.js" type="text/javascript"></script>
<script src="/assets/demo/default/base/scripts.bundle.js" type="text/javascript"></script>
<!--end::Base Scripts -->
<!--begin::Page Vendors -->
<script src="/assets/vendors/custom/fullcalendar/fullcalendar.bundle.js" type="text/javascript"></script>
<!--end::Page Vendors -->
<!--begin::Page Snippets -->
<script src="/assets/app/js/dashboard.js" type="text/javascript"></script>
<!--end::Page Snippets -->
</body>
</html>