app后台管理系统框架metronic的学习笔记

智慧并不产生于学历,而是来自对于知识的终生不懈的追求。这篇文章主要讲述app后台管理系统框架metronic的学习笔记相关的知识，希望能为你提供帮助。
先来看效果：

文章图片

给出当前页面的代码：

< !DOCTYPE html> < !--[if IE 8]> < html lang="zh" class="ie8 no-js"> < ![endif]--> < !--[if IE 9]> < html lang="zh" class="ie9 no-js"> < ![endif]--> < !--[if !IE]> < !--> < html lang="zh"> < !--< ![endif]--> < !-- BEGIN HEAD --> < head> < meta charset="utf-8" /> < title> 吃喝玩乐后台管理系统< /title> < meta http-equiv="X-UA-Compatible" content="IE=edge"> < meta content="width=device-width, initial-scale=1" name="viewport" /> < meta content="" name="description" /> < meta content="" name="author" /> < !-- BEGIN GLOBAL MANDATORY STYLES / Metronic 模板必须包含的全局 css 部分。--> < !--字体图标--> < link href="https://www.songbingjia.com/android/__PUBLIC__/metronic/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/> < link href="https://www.songbingjia.com/android/__PUBLIC__/metronic/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/> < !--字体图标end--> < link href="https://www.songbingjia.com/android/__PUBLIC__/metronic/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/> < !-- END GLOBAL MANDATORY STYLES --> < !-- BEGIN THEME GLOBAL STYLES 全局主题样式--> < link href="https://www.songbingjia.com/android/__PUBLIC__/metronic/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css"/> < link href="https://www.songbingjia.com/android/__PUBLIC__/metronic/global/css/plugins.min.css" rel="stylesheet" type="text/css"/> < !-- END THEME GLOBAL STYLES --> < !-- BEGIN THEME LAYOUT STYLES 主题布局样式--> < link href="https://www.songbingjia.com/android/__PUBLIC__/metronic/layouts/layout4/css/layout.min.css" rel="stylesheet" type="text/css"/> < link href="https://www.songbingjia.com/android/__PUBLIC__/metronic/layouts/layout4/css/themes/light.min.css" rel="stylesheet" type="text/css" id="style_color"/> < link href="https://www.songbingjia.com/android/__PUBLIC__/metronic/layouts/layout4/css/custom.min.css" rel="stylesheet" type="text/css"/> < !-- END THEME LAYOUT STYLES --> < link href="https://www.songbingjia.com/android/__PUBLIC__/css/index-index.css" rel="stylesheet"> < link href="https://www.songbingjia.com/android/__PUBLIC__/css/common.css" rel="stylesheet" type="text/css"/> < link href="http://cdn.bootcss.com/bootstrap-fileinput/4.3.1/css/fileinput.min.css" rel="stylesheet"> < !--网站小图标--> < !--< link rel="shortcut icon" href="https://www.songbingjia.com/android/favicon.ico" /> --> < /head> < !-- END HEAD --> < body class="page-container-bg-solid page-header-fixed page-sidebar-closed-hide-logo"> < !-- BEGIN HEADER --> < include file="Public/top"/> < !-- END HEADER --> < !-- BEGIN HEADER & CONTENT DIVIDER --> < div class="clearfix"> < /div> < !-- END HEADER & CONTENT DIVIDER --> < !-- BEGIN CONTAINER --> < div class="page-container"> < !-- BEGIN SIDEBAR --> < include file="Public/left"/> < !-- END SIDEBAR --> < !-- BEGIN CONTENT --> < div class="page-content-wrapper"> < !-- BEGIN CONTENT BODY --> < div class="page-content"> < !-- BEGIN PAGE HEAD--> < div class="page-head"> < !-- BEGIN PAGE TITLE --> < div class="page-title"> < h1> 添加主题< /h1> < /div> < !-- END PAGE TITLE --> < /div> < !-- END PAGE HEAD--> < div class="line5"> < /div> < div class="row"> < div class="col-md-7 col-sm-7 col-xs-7" style="text-align: left; "> < form role="form" id="themeForm" method="post" action="__URL__/addTheme" enctype="multipart/form-data"> < div class="form-group"> < label for="theme_title"> 主题标题< /label> < div class="input-text-fix" style="width:85%; "> < input id="theme_title" type="text" name="theme_title" class="form-control" placeholder="输入主题标题"> < /div> < p class="text-danger" id="themeErrMsg" style="text-align: center; "> < /p> < /div> < div class="form-group"> < label for="desc"> 主题简介< /label> < div class="input-text-fix" style="width:85%; "> < input id="desc" type="text" name="desc" class="form-control" placeholder="输入主题简介"> < /div> < /div> < div class="form-group" style="padding-top: 1%; "> < label for="theme_type"> 主题类型< /label> < div class="input-text-fix" style="width:85%; "> < input id="theme_type" type="text" name="theme_type" class="form-control" placeholder="输入主题类型"> < /div> < /div> < !--< div class="form-group"> < button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 上传主题图片< /button> < /div> --> < div class="form-group" style="padding-top: 2%; "> < label for="theme_photo_url"> 上传1张主题图片，支持jpg/jpeg/png/gif文件< /label> < input type="file" name="theme_photo_url" id="theme_photo_url" multiple class="file-loading" /> < /div> < div style="text-align: center; "> < button type="submit" class="btn btn-primary"> 提交< /button> & nbsp; & nbsp; & nbsp; < button type="reset" class="btn btn-danger"> 重置< /button> < /div> < /form> < /div> < div class="col-md-5 col-sm-5 col-xs-5"> < /div> < /div> < /div> < !-- END CONTENT BODY --> < /div> < !-- END CONTENT --> < /div> < !-- END CONTAINER --> < !-- BEGIN FOOTER --> < div class="page-footer"> < div class="page-footer-inner"> 2017 & copy; 技术支持& nbsp; & nbsp; alanlam#163.com. < /div> < !-- back to top--> < div class="scroll-to-top"> < i class="icon-arrow-up"> < /i> < /div> < /div> < !-- END FOOTER --> < !--[if lt IE 9]> < script src="https://www.songbingjia.com/android/__PUBLIC__/metronic/global/plugins/respond.min.js"> < /script> < script src="https://www.songbingjia.com/android/__PUBLIC__/metronic/global/plugins/excanvas.min.js"> < /script> < ![endif]--> < !-- BEGIN CORE PLUGINS / Metronic 所用到的插件和资源--> < script src="https://www.songbingjia.com/android/__PUBLIC__/js/jquery.min.js" type="text/javascript"> < /script> < script src="https://www.songbingjia.com/android/__PUBLIC__/metronic/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"> < /script> < script src="https://www.songbingjia.com/android/__PUBLIC__/metronic/global/plugins/js.cookie.min.js" type="text/javascript"> < /script> < script src="https://www.songbingjia.com/android/__PUBLIC__/metronic/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"> < /script> < script src="https://www.songbingjia.com/android/__PUBLIC__/metronic/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"> < /script> < script src="https://www.songbingjia.com/android/__PUBLIC__/metronic/global/plugins/jquery.blockui.min.js" type="text/javascript"> < /script> < !-- END CORE PLUGINS --> < !-- BEGIN THEME GLOBAL SCRIPTS --> < script src="https://www.songbingjia.com/android/__PUBLIC__/metronic/global/scripts/app.min.js" type="text/javascript"> < /script> < !-- END THEME GLOBAL SCRIPTS --> < !-- BEGIN THEME LAYOUT SCRIPTS --> < script src="https://www.songbingjia.com/android/__PUBLIC__/metronic/layouts/layout4/scripts/layout.min.js" type="text/javascript"> < /script> < !-- END THEME LAYOUT SCRIPTS --> < script src="https://www.songbingjia.com/android/__PUBLIC__/js/index-index.js"> < /script> < script type="text/javascript"> var url = "__URL__"; var public = "__PUBLIC__"; < /script> < script type="text/javascript" src="https://www.songbingjia.com/android/__PUBLIC__/js/addTheme.js"> < /script> < script src="http://img.readke.com/220419/091R54636-13.jpg"> < /script> < script src="http://img.readke.com/220419/091R56426-14.jpg"> < /script> < /body> < /html>

学习资源：
【app后台管理系统框架metronic的学习笔记】Bootstrap 之 Metronic 模板的学习之路 - （2）源码分析之 head 部分
https://segmentfault.com/a/1190000006684122
Bootstrap 之 Metronic 模板的学习之路 - （3）源码分析之 body 部分
https://segmentfault.com/a/1190000006697252
Bootstrap 之 Metronic 模板的学习之路 - （4）源码分析之脚本部分
https://segmentfault.com/a/1190000006709967