文章内容
1.AdminLTE依賴
2.AdminLTE整體架構
3.總結
1.AdminLTE依賴庫
官方列出的依賴關系：
主要依賴庫
- Bootstrap 3
- jQuery 1.11+
其他插件使用
- Charts
- ChartJS
- Flot
- Morris.js
- Sparkline
Form Elements
- Bootstrap Slider
- Ion Slider
- Date Picker
- Date Range Picker
- Color Picker
- Time Picker
- iCheck
- Input Mask
- Editors
- Bootstrap WYSIHTML5
- CK Editor
- Other
- DataTables
- Full Calendar
- jQuery UI
- jQuery Knob
- jVector Map
- Slim Scroll
- Pace
而在實際使用中隻需要引入到一些基礎的依賴和插件比那可以初始化一個基礎的模闆界面，至于其他插件可以在使用時引入即可，如果有必要也能使用其他不同的插件；需要引入的依賴和插件如下：
<!-- REQUIRED CSS -->
<link rel="stylesheet" href="./AdminLTE 2 _ Starter_files/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="./AdminLTE 2 _ Starter_files/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="./AdminLTE 2 _ Starter_files/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="./AdminLTE 2 _ Starter_files/AdminLTE.min.css">
<!-- Skin Style-->
<link rel="stylesheet" href="./AdminLTE 2 _ Starter_files/skin-blue.min.css">
<!-- Google Font -->
<link rel="stylesheet" href="./AdminLTE 2 _ Starter_files/css">
<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery 3 -->
<script async="" src="./AdminLTE 2 _ Starter_files/analytics.js"></script><script src="./AdminLTE 2 _ Starter_files/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="./AdminLTE 2 _ Starter_files/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="./AdminLTE 2 _ Starter_files/adminlte.min.js"></script>
2.AdminLTE整體架構
1.響應式設計
從布局的表現來看，AdminLTE會根據浏覽器的不同，自動調整布局；
自動調整布局：
2.頁面整體架構
Wrapper:是AdminLTE的頂層容器；
AdminLTE的布局主要分為五部分：
main-header：頭部元件
main-sidebar：左側側欄元件
content-wrapper：中部内容容器
main-footer：底部元件
control-sidebar：右側側欄（需要設定關聯的控制顯示的元件）
界面布局代碼如下：
3.基礎布局元件
AdminLTE架構的UI設計都以元件的形式提供，包括以下元件，具體的使用方式可以參考官方文檔：
Main Header、Sidebar、Control Sidebar、Box、Info Box、Direct Chat
元件使用
3.總結
AdminLTE架構的總體設計和Bootstrap類似，并遵循其的相關原則，具有較好的相容性。
定制能力：首先架構提供集中全局的主題,支援切換成頂部布局，其次由于其布局元件設計行對靈活，可以在自定義元素元件；由于是通過元件的形式設計，如果需要擴充新樣式元件，也可通過類似的方式定義；
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to get the
desired effect
|---------------------------------------------------------|
| SKINS | skin-blue |
| | skin-black |
| | skin-purple |
| | skin-yellow |
| | skin-red |
| | skin-green |
|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed |
| | layout-boxed |
| | layout-top-nav |
| | sidebar-collapse |
| | sidebar-mini |
|---------------------------------------------------------|
-->