zoukankan      html  css  js  c++  java
  • 使用前端后台管理模板库admin-lte(转)

    使用前端后台管理模板库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组件中所有依赖都下载完成了,直接导入使用就可以了。

    祝您好运…

  • 相关阅读:
    《人月神话》阅读笔记3
    第十五周总结
    《人月神话》阅读笔记2
    对正在使用的输入法评价
    课堂练习(找水王问题)
    第二阶段冲刺第十天
    第二阶段冲刺第九天
    第二阶段冲刺第八天
    第二阶段冲刺第七天
    openwrt U盘启动
  • 原文地址:https://www.cnblogs.com/jpfss/p/8316458.html
Copyright © 2011-2022 走看看