使用前端後臺管理模板庫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組件中全部依賴都下載完成了，直接導入使用就能夠了。

祝您好運…