一、AdminLTE介紹
1.AdminLTE介紹
AdminLTE是一款建立在bootstrap和jquery之上的開源的模板主題工具，它提供了一系列回應的、可重復使用的組件，并內置了多個模板頁面;同時自適應多種螢屏解析度，兼容PC和移動端，
通過AdminLTE，我們可以快速的創建一個回應式的Html5網站，
AdminLTE框架在網頁架構與設計上，有很大的輔助作用，尤其是前端架構設計師，用好AdminLTE不但美觀，而且可以免去寫很大cSS與JS的作業量，
2.GitHub獲取AdminLTE
https://github.com/almasaeed2010/AdminLTE
我們可以從上面網址獲取AdminLTE源代碼,下載
看到一些豐富的頁面效果
3.解壓打開
解壓后打開
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:綠色
5.AdminLTE-IT黑馬-定制版
傳智播客研究院針對英文版本AdminLTE進行了漢化，并優化與定制了部分頁面，方便我們的學習與使用，
后續SSM綜合練習課程中使用的界面就是基于AdminLTE2-IT黑馬-定制版，
大家可以去github上下載https://github.com/itheima2017/adminlte2-itheima
解壓
由于AdminLTE2-IT黑馬-定制版是基于FIS3進行開發，
在目錄結構中assets、modules、pages.plugins都是前端開發時所使用到的，最終發布的就是release，
所以對于我們使用AdminLTE2-IT黑馬-定制版來說，
我們只需要關注release目錄下的結構就可以，
二、快速入門案例
本次入門案例我們基于AdminLTE2-IT黑馬-定制版來完成
1.搭建環境
將AdminLTE2-IT黑馬-定制版下的release目錄下的css、img、plugins目錄匯入到我們自己的工程中
使用HBuilder
洗掉自動生成的目錄
復制以下三個目錄的內容
2.頁面搭建
新建一個HTML頁面
找到adminlte2-itheima-master\release\dist\pages當中
復制其中的代碼
復制到自己的demo頁面當中去
修改CSS和JS的路徑
運行測驗
·布局
.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:綠色
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/282300.html
標籤：其他
下一篇：13@nginx負載均衡