一.介绍
- 1.概念
- 建立在bootstrap和jquery之上的开源模板主题工具,提供了一系列响应的、可重复使用的组件,并内置了多个模板页面
- 适应多种屏幕分辨率,兼容PC和移动端。
- 我们可以快速的建立一个响应式Html5框架。
- 注意:AdminLTE依赖于Bootstrap3和JQuery1.11+版本
- 下载地址:https://github.com/almasaeed2010/AdminLTE
- 目录结构:
- AdminLTE
- dist
- CSS
- JS
- img
- build
- less
- AdminiLet'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
- 2.中文版AdminLTE2-IT黑马-定制版
- 下载地址:https://github.com/itheima2017/adminlte2-itheima
- 该版本基于FIS3进行开发,在目录结构中assets、modules、pages、plugins都是前端开发时所使用到的,最终发布的就是release文件夹
- 找此目录下的文件
- 用到的js等样式文件
- 使用带all开头的文件,其他的都是不完整的。
二.基本使用介绍
- 1.使用HBuilder创建一个Html5项目删除其自动生成的css等文件夹文件。
- 2.将adminlte2-itcast/release/dist目录下的css、img、plugins文件拷贝到该项目下。
- 3.项目下创建pages文件夹-》拷贝资源中all开头的html文件到该文件下,此处以all-admin-datalist.html为例
- 4.样式介绍:
- wrapper包住了body下的所有代码
- main-header里是网站的logo和导航栏的代码
- main-sidebar里是用户面板和侧边栏菜单的代码
- content-wrapper里是页面的页面和内容区域的代码
- main-footer里是页脚的代码
- control-sidebar里是页面有测测边栏区域的代码
- 5.布局选项:
- fixed:固定
- layout-boxed:盒子布局
- layout-top-nav:顶部隐藏
- sidebar-collapse:侧边栏隐藏
- sidebar-mini:侧边栏隐藏时有小图标
- 6.皮肤:
- skin-blue:蓝色
- skin-black:黑色
- skin-purple:紫色
- skin-yellow:黄色
- skin-red:红色
- skin-green:绿色
- 7.html文件中有四大区域
- A.页面头部
- B.导航侧栏
- C.内容区域
- D.底部导航
- 8.我们主要操作的是内容区域
三AdminLTE使用示例:
- 1.哪里不懂删哪里
- 2.在左边的侧边栏找相似案例,然后拷贝其样式,比如图标打开左边菜单栏右边显示的名称就是样式名称,直接将其拷贝到需要的地方就行
- 3.注意:某个功能拷贝的时候一定要考全,js代码、样式、组件