使用前端後臺管理模板庫admin-lte

使用前端後臺管理模板庫admin-lte



安裝

安裝admin-lte,可以通過以下幾種辦法安裝,下圖是GitHub中admin-lte的主頁:

通過github直接克隆安裝

git clone https://github.com/almasaeed2010/AdminLTE.git adminlte  # 將這個resposity 克隆到adminlte

可以看到上圖的目錄結構

通過bower 安裝

bower安裝可以去查看bower官網,需要nodejs 環境支持。bower地址: https://bower.io/

搭建環境

依賴下載

目錄說明

上圖爲目錄說明。

我們主要使用的事dist這個目錄

在adminlte/libs目錄存放框架庫。

建立第一個index.html 如下圖

直接導入css和js壓縮文件

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組件中所有依賴都下載完成了,直接導入使用就可以了。

祝您好運…

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章