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