先介绍一下AdminLTE的官方网站：AdminLTE官方网站 和GitHub：AdminLTE的github，可以在上面自行下载。

AdminLTE 是一个完全响应管理模板，主要依赖于 Bootstrap 3、jQuery 1.11+ 这两个框架，插件中使用的基本都是Bootstrap和jQquery插件。

AdminLTE自带JQuery和Bootstrap3框架,所以不需要再另外下载。

starter.html是 AdminLTE 建议用来作为起点的参考示例，在此基础上做开发会快很多,build目录中包含未编译过的JS,CSS文件，dist目录中包含编译过的JS,CSS文件，还提供了很多压缩版本，plugins目录中存放依赖第三方插件的CSS和JS文件，pages页面下就是一些页面。

 　　常用类：

　　　　1. Layout

 

　　　　　　.wrapper //将页面上的元素都包裹其中

　　　　　　.main-header //header,包含logo和navbar

　　　　　　.main-sidebar//aside,sidebar菜单

　　　　　　.content-wrapper //div,主体

　　　　2.navbar

　　　　　　.navbar-static-top //滚动

　　　　　　.navbar-fixed-top //固定

　　　　　　.navbar-fixed-bottom //固定

　　

|———————————————————|
| SKINS | skin-blue |
| | skin-black |
| | skin-purple |
| | skin-yellow |
| | skin-red |
| | skin-green |
|———————————————————|
 

 

skin-blue中的 blue 蓝 修改的是标题的颜色

　　AdminLTE提供的默认皮肤颜色有：

　　　　蓝 skin-blue skin-blue-light 

　　　　黄 skin-yellow skin-yellow-light　　

　　　　绿 skin-green skin-green-light

　　　　紫 skin-purple skin-purple-light

　　　　红skin-red  skin-red-light

　　　　字体黑，皮肤白  skin-black skin-black-light

|———————————————————|
|LAYOUT OPTIONS | fixed |
| | layout-boxed |
| | layout-top-nav |
| | sidebar-collapse |
| | sidebar-mini |
|———————————————————|
　　.fixed 只是为了固定导航栏
　　.layout-boxed    只是将页面包含在一个固定盒子中，max-width最大宽度: 1250px;
　　注意：当fixed布局和layout-boxed布局一起使用时，layout-boxed样式不会生效，只有fixed布局会生效
       .sidebar-collapse  让侧边栏默认是隐藏状态
　　.layout-top-nav   将导航栏设置为单纯的导航菜单，不使用侧边栏
　　.sidebar-mini 让侧边栏和左侧导航一起折叠，并且最小化是小图标。
　　注意：sidebar-mini一般和Fixed layout-boxed sidebar-collapse 一起配合使用，因为layout-top-nav布局的目的就是不要侧边栏
 
　　

 

　　上图 body样式中去掉 sidebar-mini，点击下图按钮效果如下图：

 

 body 属性加上sidebar-mini 之后，点击sidebar toggle button，logo-lg隐藏，logo-mini显示

 

效果如下图所示：

　　右侧菜单项

 

main-sidebar  左侧菜单导航
　　.sidebar-menu 菜单目录容器
 

 

 

版权声明：本文为qiu18359243869原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/qiu18359243869/p/14504419.html