AdminLTE 前端开源框架介绍
1.AdminLTE介绍
AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具,它提供了一系列响应的、
可重复使用的组件,并内置了多个模板页面;同时自适应多种屏幕分辨率,兼容PC和移动端。通
过AdminLTE,我们可以快速的创建一个响应式的Html5网站。AdminLTE框架在网页架构与设计
上,有很大的辅助作用,尤其是前端架构设计师,用好AdminLTE 不但美观,而且可以免去写很大
CSS与JS的工作量。
2.GitHub获取AdminLTE
从github上获取源码
https://github.com/ColorlibHQ/AdminLTE
3.AdminLTE结构介绍
AdminLTE/
├── dist/
├──├── CSS/
├──├── JS
├──├── img
├── build/
├──├── less/
├──├──├── AdminLTE\'s Less files
├──└── Bootstrap-less/ (Only for reference. No modifications have been made)
├──├── mixins/
├──├── variables.less
├──├── mixins.less
└── plugins/
├── All the customized plugins CSS and JS files
注意:AdminLTE依赖于两个框架Bootstrap3与JQuery1.11+
4.AdminLTE布局与皮肤
布局
.wrapper包住了body下的所有代码
.main-header里是网站的logo和导航栏的代码
.main-sidebar里是用户面板和侧边栏菜单的代码
.content-wrapper里是页面的页面和内容区域的代码
.main-footer里是页脚的代码
.control-sidebar里是页面右侧侧边栏区域的代码
布局选项
fixed:固定
layout-boxed:盒子布局
layout-top-nav:顶部隐藏
sidebar-collapse:侧边栏隐藏
sidebar-mini:侧边栏隐藏时有小图标
皮肤
skin-blue:蓝色
skin-black:黑色
skin-purple:紫色
skin-yellow:黄色
skin-red:红色
skin-green:绿色
以上项可以查看start.html页面中查看
5.AdminLTE2-IT黑马-定制版 (此处十分感谢传智播客学院的开源)
传智播客研究院针对英文版本AdminLTE进行了汉化,并优化与定制了部分页面,方便我们的学习与使用。后续SSM综合练习课程中使用的界面就是基于AdminLTE2-IT黑马-定制版。
可以去github上下载 : https://github.com/itheima2017/adminlte2-itheima
黑马官方将AdminLTE2-IT黑马-定制版本下载解压的目录结构如下:
由于AdminLTE2-IT黑马-定制版是基于FIS3进行开发,在目录结构中assets、modules、pages、
plugins都是前端开发时所使用到的,最终发布的就是release。所以对于我们使用AdminLTE2-IT黑
马-定制版来说,我们只需要关注release目录下的结构就可以。
在release目录下有css、img、pages、plugins目录。前两者就不在解决pages是产生的一些定制的页面,而plugins中是相关的插件,例如jquery、bootstrap等相关的css与js文件。
可以对比进行修改 只需要这四个文件夹的内容就够了
然后需要什么只要对其进行修改即可
到此 此开源框架的介绍就完毕了 下载的链接在上方介绍
此处 @我自己 这是QQ聊天的链接 欢迎一起吹
相关文章
- TP5框架,开源小程序商城源码,前端+后台完整版
- 介绍开源的.net通信框架NetworkComms框架 源码分析(十四)StreamTools
- iOS开发-常用第三方开源框架介绍(你了解的ios只是冰山一角)--(转)
- 介绍开源的.net通信框架NetworkComms框架 源码分析(二十二 )TCPConnectionStatic
- 介绍开源的.net通信框架NetworkComms框架 源码分析(二十三 )TCPConnection
- .NET Core开源快速开发框架Colder发布 (NET Core2.1+AdminLTE版)
- VUE+Element 前端应用开发框架功能介绍
- IOS-常用第三方开源框架介绍
- 介绍开源的.net通信框架NetworkComms框架 源码分析
- 介绍开源的.net通信框架NetworkComms框架之五 心跳检测