AdminLTE(1)

一.介绍

• 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代码、样式、组件