框架介紹：AdminLTE是一個完全響應管理模板。基於Bootstrap3框架，易定制模板。適合多種屏幕分辨率，從小型移動設備到大型台式機。內置了多個頁面，包括儀表盤、郵箱、日歷、鎖屏、登錄及注冊、404錯誤、500錯誤等頁面。
### 完整版項目目錄：
roncoo-AdminLTE/
├── dist/ 編譯后的靜態資源目錄
│ ├── CSS/
│ ├── JS
│ ├── fonts
│ ├── img
├── build/ 編譯前的源文件目錄
│ ├── less/
│ │ ├── roncoo-AdminLTE's Less 文件
│ ├── fonts/
│ │ ├── roncoo-AdminLTE's 字體 文件
│ ├── js/
│ │ ├── roncoo-AdminLTE's javascript 文件
│ ├── img/
│ │ ├── roncoo-AdminLTE's image 文件
│ └── Bootstrap-less/ (bootstrap less，僅供參考，不做修改)
│ ├── mixins/
│ ├── variables.less
│ ├── mixins.less
└── plugins/
├── 所有的第三方插件的CSS和JS文件
使用方法：
- 根據項目需要選擇引用整個頁面工程
- ajax模式中所有js和css統一在index.html引入，不再分開頁面引入。ajax模式中添加tab頁功能，加載頁面可以加載多個，通過頭部tab切換，該功能只在ajax模式中存在。a標簽通過添加屬性target=navTab添加新開標簽頁功能，通過異步請求href連接頁面，僅ajax模式可使用。
- 按照參數進行編寫
1】自定義主題樣式
（1）在body中設置class。
<body class="hold-transition skin-blue sidebar-mini">
skin-blue：主題顏色，如果引入了_all-skins.min.css，有很多顏色可以選擇，設置為skin-blue默認就為下一圖的主題樣式。將skin-后面blue換成下圖二顏色名，主題色也跟着變化，具體地方在下圖一登錄頭像旁換膚功能體現
（2）sidebar-mini：在AdminLTE.css中可以找到。
2】wrapper設置: AdminLTE.css
<div class="wrapper"> <!--頭部--> <header class="main-header"></header> <!--左側導航--> <aside class="main-sidebar"></aside> <!--右側主要內容--> <section class="content-wrapper"></section> </div>
header設置：放在header標簽里。
<!- - Logo - ->
<a href="index2.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini">
<img alt="" src="${ctx}/assets/img/logo.png" width="40px" height="40px">
</span>
<span class="logo-lg">xxx后台管理系統</span>
</a>
<!- - Header Navbar - ->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- User Account: -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="${ctx}/assets/img/user.png" class="user-image" alt="User Image">
<span class="hidden-xs">${user.name}</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img id="user-header" src="${ctx}/assets/img/user.png" class="img-circle" alt="User Image">
<p>${user.name}</p>
</li>
<!--Menu Body-->
<li class="user-body">
<div class="col-xs-4 text-center">
<a href="#">Followers</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Sales</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Friends</a>
</div>
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a id="systemsettingBtn" href="javascript:void(0)" class="btn btn-default btn-flat">修改密碼</a>
</div>
<div class="pull-right">
<a href="${ctx}${apath}/logout" class="btn btn-default btn-flat">注銷</a>
</div>
</li>
</ul>
</li>
<!-- Control Sidebar Toggle Button -->
<li>
<a href="#" data-toggle="control-sidebar">
<i class="fa fa-gears"></i>
</a>
</li>
</ul>
</div>
</nav>
header效果如下圖所示，點擊sidebar toggle button，logo-lg隱藏，logo-mini顯示，如下圖。
3】main-sidebar:左側導航
4】 content設置：放在section標簽里。
-
- 重點 如果是在ajax模式下：設置在app.js里。Ajax的布局模式，只需要在body標簽里面添加`.ajax-template .fixed`類即可實現（ajax模式下需要注意所有元素不能有相同的id名，因為ajax模式下相當於把所有的內容加載到同一個頁面，相同id會出問題，比如用bootstrap里的tab頁，類似的相同函數名等等）
最后，如果在ajax模式下，由於頁面太多，比較復雜的情況下，類似與我做盛維的時候，記不得自己到底用過什么id名，最終大招：改寫app.js里的ajax請求頁面的源碼，如下圖：（大家在后期開發有問題時可以接着改，如果發現我的改寫有問題的請輕輕噴(^_^)
app.js的源碼改寫：
