最近項目須要用到AdminLTE，因此整理一份中文版的小教程

 先介紹一下AdminLTE的官方網站：AdminLTE官方網站 和GitHub：AdminLTE的github，能夠在上面自行下載。

AdminLTE 是一個徹底響應管理模板，主要依賴於 Bootstrap 三、jQuery 1.11+ 這兩個框架，插件中使用的基本都是Bootstrap和jQquery插件。

AdminLTE自帶JQuery和Bootstrap3框架,因此不須要再另外下載。

starter.html是 AdminLTE 建議用來做爲起點的參考示例，在此基礎上作開發會快不少,build目錄中包含未編譯過的JS,CSS文件，dist目錄中包含編譯過的JS,CSS文件，還提供了不少壓縮版本，plugins目錄中存放依賴第三方插件的CSS和JS文件，pages頁面下就是一些頁面。

 　　經常使用類：

　　　　1. Layout

 

　　　　　　.wrapper //將頁面上的元素都包裹其中

　　　　　　.main-header //header,包含logo和navbar

　　　　　　.main-sidebar//aside,sidebar菜單

　　　　　　.content-wrapper //div,主體

　　　　2.navbar

　　　　　　.navbar-static-top //滾動

　　　　　　.navbar-fixed-top //固定

　　　　　　.navbar-fixed-bottom //固定

　　

|---------------------------------------------------------|

| SKINS | skin-blue |

| | skin-black |

| | skin-purple |

| | skin-yellow |

| | skin-red |

| | skin-green |

|---------------------------------------------------------|

 

 

skin-blue中的 blue 藍 修改的是標題的顏色

　　AdminLTE提供的默認皮膚顏色有：

　　　　藍 skin-blue skin-blue-light 

　　　　黃 skin-yellow skin-yellow-light　　

　　　　綠 skin-green skin-green-light

　　　　紫 skin-purple skin-purple-light

　　　　紅skin-red  skin-red-light

　　　　字體黑，皮膚白  skin-black skin-black-light

|---------------------------------------------------------|

|LAYOUT OPTIONS | fixed |

| | layout-boxed |

| | layout-top-nav |

| | sidebar-collapse |

| | sidebar-mini |

|---------------------------------------------------------|

　　.fixed 只是爲了固定導航欄

　　.layout-boxed    只是將頁面包含在一個固定盒子中，max-width最大寬度: 1250px;

　　注意： 當fixed佈局和layout-boxed佈局一塊兒使用時，layout-boxed樣式不會生效，只有fixed佈局會生效

       .sidebar-collapse  讓側邊欄默認是隱藏狀態

　　.layout-top-nav   將導航欄設置爲單純的導航菜單，不使用側邊欄

　　.sidebar-mini 讓側邊欄和左側導航一塊兒摺疊，而且最小化是小圖標。

　　注意： sidebar-mini通常和Fixed layout-boxed sidebar-collapse 一塊兒配合使用，由於layout-top-nav佈局的目的就是不要側邊欄

 

　　

 

　　上圖 body樣式中去掉 sidebar-mini，點擊下圖按鈕效果以下圖：

 

 body 屬性加上sidebar-mini 以後，點擊sidebar toggle button，logo-lg隱藏，logo-mini顯示

 

效果以下圖所示：

　　右側菜單項

 

main-sidebar  左側菜單導航

　　.sidebar-menu 菜單目錄容器