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

安装

安装admin-lte，可以通过以下几种办法安装，下图是GitHub中admin-lte的主页:

通过github直接克隆安装

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

可以看到上图的目录结构

通过bower 安装 

bower安装可以去查看bower官网，需要nodejs 环境支持。bower地址: https://bower.io/
  • 1
  • 2

搭建环境

依赖下载

目录说明

上图为目录说明。

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

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

建立第一个index.html 如下图

直接导入css和js压缩文件

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

直接打开/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组件中所有依赖都下载完成了，直接导入使用就可以了。

祝您好运…

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