CBoard框架使用總結三--AdminLTE可擴展性分析

文章內容

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