AdminLTE模板框架

一、AdminLTE简介

官网：https://adminlte.io/
AdminLTE是一个完全响应的管理模板。
它是一个基于Bootstrap框架和jQuery插件的开源的管理模板工具，提供了一系列响应迅速的、可重复使用的组件，并设置了许多模板页面。
自适应从小型移动设备到大型台式机的多种屏幕分辨率（兼容PC和移动端）。
通过AdminLTE，可以快速的搭建一个响应式的HTML5网站。AdminLTE框架在网页架构和设计上有很大的辅助作用，尤其是前端开发人员，如果能很好的使用AdminLTE，不但界面美观，而且可以减少书写大量CSS和JS的工作量。

二、AdminLTE 的基本使用

下载AdminLTE：
AdminLTE 托管在 Github 上，可以从 Github releases 上下载。
下载地址：
https://github.com/ColorlibHQ/AdminLTE/releases
https://github.com/ColorlibHQ/AdminLTE

安装AdminLTE：
将下载的 AdminTLE 压缩包解压即可。

bower_components：存放了这个框架依赖的其他框架，如bootstrap，jquery、字体样式、图标样式等。
build：编译前的源文件目录
dist：编译后的静态资源目录
pages：目录下是一些示例页面
plugins：目录存放依赖的第三方插件
starter.html ：是 AdminLTE 建议用来作为入门的参考示例
index.html：是AdminLTE中比较完善的展示品，用于参考、借鉴。

三、快速入门

根据项目需要选择引用整个页面工程
ajax模式中所有js和css统一在index.html引入，不再分开页面引入。ajax模式中添加tab页功能，加载页面可以加载多个，通过头部tab切换，该功能只在ajax模式中存在。a标签通过添加属性target=navTab添加新开标签页功能，通过异步请求href连接页面，仅ajax模式可使用。
按照参数进行编写

1】自定义主题样式

（1）在body中设置class。
```
  <body class="hold-transition skin-blue sidebar-mini">skin-blue：主题颜色，如果引入了_all-skins.min.css，就有很多颜色可以选择。
```
（2）sidebar-mini：在AdminLTE.css中可以找到。

2】wrapper设置: AdminLTE.css

 <div class="wrapper"><!--头部--><header class="main-header"></header><!--左侧导航--><aside class="main-sidebar"></aside><!--右侧主要内容--><section class="content-wrapper"></section></div>

3】main-sidebar:左侧导航
4】content设置：放在section标签里。

Layout

类名	作用
wrapper	将页面上的元素都包裹在其中。
main-header	包含 logo 和 navbar。
main-sidebar	包含用户面板和 sidebar 菜单。
content-wrapper	包含页面主体内容。
control-sidebar	包含右侧边栏。
main-footer	页面底部（包含网站备案信息及版权说明）。

Layout Options

类名	作用
fixed	固定导航栏。
sidebar-collapse	让侧边栏默认是隐藏状态。
layout-boxed	将页面包含在一个固定的盒子中，最大宽度时 1250px。
layout-top-nav	将导航栏设置为单纯的导航菜单，不使用侧边栏。
sidebar-mini	让侧边栏和左侧导航一起折叠，并且最小化到小图标。

注意事项：
当 fixed 布局和 layout-boxed 布局一起使用时，layout-boxed 样式不会生效，只有 fixed
布局会生效。
sidebar-mini 一般和 fixed、layout-boxed、sidebar-collapse 配合使用，而 layout-top-nav布局的目的就是不适用侧边栏。

Skins

样式	作用
skin-blue 和 skin-blue-light	蓝
skin-black 和 skin-black-light	字体黑，皮肤白
skin-purple 和 skin- purple -light	紫
skin-yellow 和 skin- yellow -light	黄
skin-red 和 skin- red -light	红
skin-green 和 skin-green-light	绿

使用之前必须在页面中进行引入，
例如：< link rel=“stylesheet” href=“dist/css/skins/skin-blue.min.css”>

Required JS Scripts

<!-- jQuery 3 -->
<script src="bower_components/jquery/dist/jquery.min.js"></script><!-- Bootstrap 3.3.7 -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script><!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>

sidebar-menu：目录容器。
treeview：父级菜单。
treeview-menu：子菜单或下拉菜单。
active：打开菜单。