AdminLTE_hehe.employment.over.40.2

文章目錄

• 40.4 AdminLTE介紹
• 40.5 GitHub擷取AdminLTE
• 40.6 AdminLTE結構介紹
• 40.7 AdminLTE布局與皮膚

40.4 AdminLTE介紹

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

40.5 GitHub擷取AdminLTE

• 擷取網址：https://github.com/almasaeed2010/AdminLTE

  

40.6 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+

40.7 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：綠色