Ace Admin前端框架笔记一概要与布局介绍

一 简要

Ace Admin官网 http://ace.jeka.by/

Ace Admin Git  https://github.com/bopoda/ace

Ace是一款轻量且功能丰富的管理模板，干净且易于使用。 
当前版本具有以下功能：

•  4种不同的皮肤
•  基于Bootstrap 3的响应式设计（特别是3.1.1）
•  使用Javascript和CSS构建器来构建您自己的最小文件
•  在页面帮助中，您可以轻松选取任何元素并查看其工作原理
•  自定义元素和插件
•      Bootstrap，jQuery UI和第三方插件和元素

文件目录介绍

从git下载源码ace-master并解压

此目录为html文件，按字母顺序排列

如果您想查看HTML页面的总体布局，您可以从blank.html开始，它里面没有任何组件，具有最少代码。

assets为一些资源文件，具体就不介绍了

使用

页面布局

1） Navbar导航栏
内部主容器区域：
2）Sidebar侧边栏
3）Breadcrumbs面包屑（在“主要内容”中）
4） Page conten页面内容（在“主要内容”中）
5） Settings box设置框（在“页面内容”内）

6）Footer页脚

头元素

head 元素包含标题，元标记，样式表和一些脚本

CSS文件顺序

The correct order of including CSS files is as follows:
正确的css顺序如下
1 bootstrap.css
2 fontawesome.css if you want to use Fontawesome icons.
3 ace-fonts.css 
You may want to serve fonts from your own server or hosted by Google. 
如果需要自定义字体
View this file for an example: 
fonts.mustache
4 Third party css files  第三方css文件 such as chosen.css or ui.jqgrid.css
5 ace.css. Ace's main CSS file.
6 ace-part2.css. IE 9 and below have a 4096 selector limit. 这个一般没用
7 ace-skins.css. Ace skin CSS file, if you want to use a skin other that default one. 
You can also compile default Ace styles (ace.css) using a different skin.
Ace皮肤CSS文件，如果你想使用其他默认的皮肤。 
8 ace-rtl.css。Ace的RTL方向CSS文件，如果你想使用阿拉伯语，希伯来语或波斯语。这个也没用
9 ace-ie.css which is used by IE9 and below. 由IE9及以下版本使用。

10 内联样式，这个不推荐 Inline styles which is not recommend and you should always try to separate your CSS from your HTML and application code.

例子：

Script 顺序

The right order of including script files is:
script文件的正确顺序
Scripts that are inside HEAD element: 
(also visible in styles.mustache)
1 ace-extra.js 
if you need cookie support and sidebar collapse/expand, fixing navbar, etc.
如果您需要Cookie支持和侧边栏折叠/展开，导航栏等。

2 html5shiv.min.js & respond.min.js wrapped inside IE conditional comments which enable some HTML5 features on IE8 and below.

3 Other scripts that are preferrably at the end of document: 
其他脚本最好放在文档末尾
    3.1 jquery.js as well as jquery v1.x which is included for IE9 and below. 
    jquery.js should be inside special IE conditional comments and it will be ignored by IE9 and below. 
jquery v1.x should be inside conditional comments so that it's included by IE9 and below only.
    3.2 bootstrap.js
   3.3 excanvas.js for IE8 if you are going to need HTML5 Canvas support. Currently plugins that need canvas support are:
Flotchart
Sparklines
jQuery Knob
Easy Pie Chart
4 You should include excanvas before including above plugins.
  Any Plugin that you want to use for example: 
Chosen 
Fuelux Wizard
5 Finally you should include ace-elements.js and ace.js

6 And then inline scripts that you may want to use for the page.

例子：

Viewport meta tag

请注意，使用移动设备时，用户放大/缩小时页面可能看起来不太好，尤其是在导航栏或边栏被调整时。 

一种选择是防止用户使用user-scalable=no属性放大/缩小：

Body element

   ...
 

目前有4个可用的边框可以改变边栏和导航栏的颜色，它们是：

1. .no-skin
2. .skin-1
3. .skin-2
4. .no-skin.skin-3

文件末尾

可以防止脚本文件和内联脚本

空布局

见blank.html，他是默认布局

不过我现在下载的版本空文件有点变化，包含了许多不必要的元素，刚开始看起来有点困难，

我把他的css 和js 先贴下，这个很有用

登录布局

仅用于登录页面的登录布局如下所示

以后我详细介绍