AdminLTE 前端開源框架介紹

本文轉載自查看原文 2020-11-27 10:44 987 jQuery/ Bootstrap

1.AdminLTE介紹

AdminLTE是一款建立在bootstrap和jquery之上的開源的模板主題工具，它提供了一系列響應的、
可重復使用的組件，並內置了多個模板頁面；同時自適應多種屏幕分辨率，兼容PC和移動端。通
過AdminLTE，我們可以快速的創建一個響應式的Html5網站。AdminLTE框架在網頁架構與設計
上，有很大的輔助作用，尤其是前端架構設計師，用好AdminLTE 不但美觀，而且可以免去寫很大
CSS與JS的工作量。

2.GitHub獲取AdminLTE

從github上獲取源碼
https://github.com/ColorlibHQ/AdminLTE

下載源碼

3.AdminLTE結構介紹

AdminLTE/
├── dist/
├──├── CSS/
├──├── JS
├──├── img
├── build/
├──├── less/
├──├──├── AdminLTE's Less files
├──└── Bootstrap-less/ (Only for reference. No modifications have been made)
├──├── mixins/
├──├── variables.less
├──├── mixins.less
└── plugins/
├── All the customized plugins CSS and JS files

框架文件結構

注意:AdminLTE依賴於兩個框架Bootstrap3與JQuery1.11+

4.AdminLTE布局與皮膚

布局
.wrapper包住了body下的所有代碼
.main-header里是網站的logo和導航欄的代碼
.main-sidebar里是用戶面板和側邊欄菜單的代碼
.content-wrapper里是頁面的頁面和內容區域的代碼
.main-footer里是頁腳的代碼
.control-sidebar里是頁面右側側邊欄區域的代碼
布局選項
fixed：固定
layout-boxed：盒子布局
layout-top-nav：頂部隱藏
sidebar-collapse：側邊欄隱藏
sidebar-mini：側邊欄隱藏時有小圖標
皮膚
skin-blue：藍色
skin-black：黑色
skin-purple：紫色
skin-yellow：黃色
skin-red：紅色
skin-green：綠色
以上項可以查看start.html頁面中查看

5.AdminLTE2-IT黑馬-定制版 (此處十分感謝傳智播客學院的開源)

傳智播客研究院針對英文版本AdminLTE進行了漢化，並優化與定制了部分頁面，方便我們的學習與使用。后續SSM綜合練習課程中使用的界面就是基於AdminLTE2-IT黑馬-定制版。
可以去github上下載 : https://github.com/itheima2017/adminlte2-itheima
黑馬官方將AdminLTE2-IT黑馬-定制版本下載解壓的目錄結構如下：

黑馬的定制版本

由於AdminLTE2-IT黑馬-定制版是基於FIS3進行開發，在目錄結構中assets、modules、pages、
plugins都是前端開發時所使用到的，最終發布的就是release。所以對於我們使用AdminLTE2-IT黑
馬-定制版來說，我們只需要關注release目錄下的結構就可以。
在release目錄下有css、img、pages、plugins目錄。前兩者就不在解決pages是產生的一些定制的頁面，而plugins中是相關的插件，例如jquery、bootstrap等相關的css與js文件。