一、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：打开菜单。
491
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
