使用前端后台管理模板库admin-lte（转）

使用前端后台管理模板库admin-lte

---

• 使用前端后台管理模板库admin-lte
  • 安装
  • 搭建环境

---

安装

安装admin-lte，能够经过如下几种办法安装，下图是GitHub中admin-lte的主页:

经过github直接克隆安装

   
   
   
   

    
    
    
    
1
   
   
   
   
git clone https://github.com/almasaeed2010/AdminLTE.git adminlte  # 将这个resposity 克隆到adminlte

能够看到上图的目录结构

经过bower 安装

   
   
   
   

    
    
    
    
1
    
    
    
    
2
   
   
   
   
bower安装能够去查看bower官网，须要nodejs 环境支持。bower地址: https://bower.io/

搭建环境

依赖下载

目录说明

上图为目录说明。

   
   
   
   

    
    
    
    
1
    
    
    
    
2
   
   
   
   
咱们主要使用的事dist这个目录

在adminlte/libs目录存放框架库。

创建第一个index.html 以下图

直接导入css和js压缩文件

   
   
   
   

    
    
    
    
1
    
    
    
    
2
   
   
   
   
AdminLTE.css 和 AdminLTE.min.css、 adminlte.min.js和 adminlte.js两个文件内容都是同样的，不过带min的都是经过压缩后的文件。

直接打开/libs/admin-lte/index.html 看到以下内容:

如今将四个不一样颜色的框框显示出来，就说明咱们项目搭建成功了。

咱们找到adlte中index.html 搜索关键词 Orders 找到四个框框源码的位置。而后复制，以下图:

找到代码之后复制进入index.html

获得下图的index.html

而后用浏览器打开index.html以下图:

这就说明了，adminlt环境基本搭建成功。

后续: 实际本身须要的样式或者组件库，导入不一样的css，便可实现和admin-lte同样的效果。adminlte.min.js 依赖于jquery，在admin的bower组件中全部依赖都下载完成了，直接导入使用就能够了。

祝您好运…