AdminLTE(1)

一.介紹

• 1.概念
  • 建立在bootstrap和jquery之上的開源模板主題工具，提供了一系列響應的、可重複使用的組件，並內置了多個模板頁面
  • 適應多種屏幕分辨率，兼容PC和移動端。
  • 我們可以快速的建立一個響應式Html5框架。
  • 注意：AdminLTE依賴於Bootstrap3和JQuery1.11+版本
• 下載地址：https://github.com/almasaeed2010/AdminLTE
• 目錄結構：
  • AdminLTE
    • dist
      • CSS
      • JS
      • img
    • build
      • less
        • AdminiLet'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
• 2.中文版AdminLTE2-IT黑馬-定製版
  • 下載地址：https://github.com/itheima2017/adminlte2-itheima
  • 該版本基於FIS3進行開發，在目錄結構中assets、modules、pages、plugins都是前端開發時所使用到的，最終發佈的就是release文件夾
  • 找此目錄下的文件
  • 用到的js等樣式文件
  • 使用帶all開頭的文件，其他的都是不完整的。

二.基本使用介紹

• 1.使用HBuilder創建一個Html5項目刪除其自動生成的css等文件夾文件。
• 2.將adminlte2-itcast/release/dist目錄下的css、img、plugins文件拷貝到該項目下。
• 3.項目下創建pages文件夾-》拷貝資源中all開頭的html文件到該文件下，此處以all-admin-datalist.html爲例
• 4.樣式介紹：
  • wrapper包住了body下的所有代碼
  • main-header裏是網站的logo和導航欄的代碼
  • main-sidebar裏是用戶面板和側邊欄菜單的代碼
  • content-wrapper裏是頁面的頁面和內容區域的代碼
  • main-footer裏是頁腳的代碼
  • control-sidebar裏是頁面有測測邊欄區域的代碼
• 5.佈局選項：
  • fixed：固定
  • layout-boxed：盒子佈局
  • layout-top-nav：頂部隱藏
  • sidebar-collapse：側邊欄隱藏
  • sidebar-mini：側邊欄隱藏時有小圖標
• 6.皮膚：
  • skin-blue：藍色
  • skin-black：黑色
  • skin-purple：紫色
  • skin-yellow：黃色
  • skin-red：紅色
  • skin-green：綠色
• 7.html文件中有四大區域
  • A.頁面頭部
  • B.導航側欄
  • C.內容區域
  • D.底部導航
• 8.我們主要操作的是內容區域

三AdminLTE使用示例：

• 1.哪裏不懂刪哪裏
• 2.在左邊的側邊欄找相似案例，然後拷貝其樣式，比如圖標打開左邊菜單欄右邊顯示的名稱就是樣式名稱，直接將其拷貝到需要的地方就行
• 3.注意：某個功能拷貝的時候一定要考全，js代碼、樣式、組件