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页脚
<!DOCTYPE html>
<html lang="en"><head><!-- title, meta tags, list of stylesheets, etc ... --></head><body class="no-skin"><div class="navbar" id="navbar"><!-- 1 导航栏 navbar goes here --></div><!-- 主容器 --><div class="main-container" id="main-container"><div class="sidebar responsive" id="sidebar"><!-- 2 侧边栏 sidebar goes here --></div><!-- 主要内容/.main-content --><div class="main-content"><!-- 3 面包屑 breadcrumbs goes here --><div class="breadcrumbs"></div><!-- 4 页面内容/.page-content --><div class="page-content"><!-- 5 设置框 setting box goes here if needed --><div class="row"><div class="col-xs-12"><!--page content goes here --></div><!-- /.col --></div><!-- /.row --></div></div><!-- 6 頁脚 footer area --></div><!-- /.main-container --><!-- list of script files --></body>
</html>头元素
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><!-- use the following meta to force IE use its most up to date rendering engine --><!-- 使用下面的meta来强制IE使用其最新的渲染引擎 --><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title> page tite </title><meta name="description" content="page description" /><!-- 样式表stylesheets are put here, refer to files/css documentation --><!-- 脚本 some scripts should be here, refer to files/javascript documentation --></head>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.
例子：
<link href="path/to/bootstrap.min.css" rel="stylesheet" /><link href="path/to/fontawesome.min.css" rel="stylesheet" /><!-- only if needed --><link href="path/to/ace-fonts.css" rel="stylesheet" /><!-- you can also use google hosted fonts -->
<link href="path/to/ace.min.css" rel="stylesheet" /><!--[if lte IE 9]><link href="path/to/ace-part2.min.css" rel="stylesheet" /><![endif]--><link href="path/to/ace-skins.min.css" rel="stylesheet" /><!-- only if needed --><link href="path/to/ace-rtl.min.css" rel="stylesheet" /><!-- only if needed --><!--[if lte IE 9]><link href="path/to/ace-ie.min.css" rel="stylesheet" /><![endif]--><style>/* not recommended to define new CSS rules inside your HTML page */.some-selector {color: red;}</style>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.
<head><script src="ace-extra.min.js"></script><!--[if lte IE 8]><script src="html5shiv.min.js"></script><script src="respond.min.js"></script><![endif]--></head>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.
例子：
<!--[if !IE]> --> <script src="jquery.min.js"></script><!-- <![endif]--><!--[if lte IE 9]><script src="jquery1x.min.js"></script><![endif]--><script src="bootstrap.min.js"></script>
<!-- ie8 canvas if required for plugins such as charts, etc --><!--[if lte IE 8]><script src="excanvas.min.js"></script><![endif]--> <script src="plugin1.min.js"></script><script src="plugin2.min.js"></script><script src="plugin3.min.js"></script> <script src="ace-elements.min.js"></script><script src="ace.min.js"></script><script type="text/javascript">//If page has any inline scripts, it goes herejQuery(function($) {alert('hello!');});</script></body>Viewport meta tag
请注意，使用移动设备时，用户放大/缩小时页面可能看起来不太好，尤其是在导航栏或边栏被调整时。
一种选择是防止用户使用user-scalable=no属性放大/缩小：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />Body element
<body class="no-skin">...</body>目前有4个可用的边框可以改变边栏和导航栏的颜色，它们是：
.no-skin.skin-1.skin-2.no-skin.skin-3
文件末尾
可以防止脚本文件和内联脚本
空布局
见blank.html，他是默认布局
<html><head><!-- title, meta tags, list of stylesheets, etc ... --></head><body class="no-skin"><div class="navbar" id="navbar"><!-- navbar goes here --></div><div class="main-container" id="main-container"><div class="sidebar responsive" id="sidebar"><!-- sidebar goes here --></div><div class="main-content"><div class="page-content"><div class="row"><div class="col-xs-12"><!-- page content goes here --></div><!-- /.col --></div><!-- /.row --></div><!-- /.page-content --></div><!-- /.main-content --></div><!-- /.main-container --><!-- list of script files --></body></html>不过我现在下载的版本空文件有点变化，包含了许多不必要的元素，刚开始看起来有点困难，
我把他的css 和js 先贴下，这个很有用
<head><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta charset="utf-8" /><title>Blank Page - Ace Admin</title><meta name="description" content="" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /><!-- bootstrap & fontawesome --><link rel="stylesheet" href="assets/css/bootstrap.min.css" /><link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css" /><!-- page specific plugin styles --><!-- text fonts --><link rel="stylesheet" href="assets/css/fonts.googleapis.com.css" />
<!-- ace styles --><link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" /><!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ace-part2.min.css" class="ace-main-stylesheet" /><![endif]--><link rel="stylesheet" href="assets/css/ace-skins.min.css" /><link rel="stylesheet" href="assets/css/ace-rtl.min.css" /><!--[if lte IE 9]> <link rel="stylesheet" href="assets/css/ace-ie.min.css" /><![endif]--><!-- inline styles related to this page --><!-- ace settings handler --><script src="assets/js/ace-extra.min.js"></script><!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries --><!--[if lte IE 8]><script src="assets/js/html5shiv.min.js"></script><script src="assets/js/respond.min.js"></script><![endif]--></head> <!-- basic scripts --><!--[if !IE]> --><script src="assets/js/jquery-2.1.4.min.js"></script><!-- <![endif]--><!--[if IE]>
<script src="assets/js/jquery-1.11.3.min.js"></script><![endif]--><script type="text/javascript">if('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");</script><script src="assets/js/bootstrap.min.js"></script><!-- page specific plugin scripts --><!-- ace scripts --><script src="assets/js/ace-elements.min.js"></script><script src="assets/js/ace.min.js"></script><!-- inline scripts related to this page --></body>登录布局
仅用于登录页面的登录布局如下所示
</head><body class="login-layout"><div class="main-container"><div class="main-content"><div class="row"><div class="col-sm-10 col-sm-offset-1"><!-- page content goes here --></div><!-- /.col --></div><!-- /.row --></div><!-- /.main-content --></div><!-- /.main-container --></body>
</html>以后我详细介绍
Ace Admin前端框架笔记一概要与布局介绍相关推荐
- vue-admin-beautiful-pro源码、vue admin pro、vue admin plus 基于element-plus的vue3.0 admin前端框架
Vue Admin Plus已拥有四种布局(画廊布局.综合布局.纵向布局.横向布局)四种主题(默认.海洋之心.绿茵草场,荣耀典藏),共计16布局主题种组合,满足所有项目场景,已支持常规bug自动修复, ...
- 前端框架及项目面试题库介绍
第三个视频给我们讲解了一些前端常问的基础面试题,我们必须理解去思考如何应对这些面试题 1.vue-router有哪几种导航钩子 ① 全局导航钩子:一般用来判断权限,以及页面丢失时需要执行的操作: be ...
- 前端学习笔记之CSS网页布局
CSS网页布局 阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如wor ...
- 前端框架OnsenUI学习之页面结构介绍
由于目前所有页面均写在HTML中,因此页面的大体结构和HTML相同,都有<head>和<body>,其中在<head>中进行css样式和JS文件的引用,在<b ...
- 【前端框架之Bootstrap 02】布局与导航
前言 距离上次有几天时间了,其实我这段时间也多多少少在看这块,但是效果不好啊! 我就在那里捣鼓捣鼓,搞了半天还是一头雾水,可能是老夫真的老了吧,学习新东西还是不行了! 所以老夫这里就要开始无耻了,我准 ...
- Web前端工作笔记005---浏览器内核介绍
JAVA技术交流QQ群:170933152 浏览器最重要或者说核心的部分是"Rendering Engine",可大概译为"渲染引擎",不过我们一般习惯将之称为 ...
- 前端学习笔记之流式布局（百分比布局） 3.24
1 流式布局(百分比布局)概念 流式布局,就是百分比布局,也称非固定像素布局. 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充. 流式布局方式是移动web开发 ...
- easy admin java_GitHub - zzccbb8/easyadmin: 简易的java后台管理框架，基于SpringBoot+FreeMark+ace admin+mysql...
easyadmin 简介 一个简单好看的后台开发模板框架,目前具备用户管理,菜单管理和角色管理3个功能,也只打算做这3个,毕竟这是所有后台管理框架的核心,而本项目也只是打算做一个模板框架而已 优点 一 ...
- spring admin mysql_easyadmin: 简易的java后台管理框架，基于SpringBoot+FreeMark+ace admin+mysql...
easyadmin 数据库一定要用utf8mb4编码,记得先执行manager.sql,再执行initdata.sql,其中tenant表不用管,这是我打算做的另外一个项目设计的表,因为直接复制的本项 ...
- Pear Admin Layui - 基于 Layui 打造的免费开源、快速、高效的中后台管理系统前端框架
代码量少.学习简单.功能强大.轻量级.易扩展,轻松开发从现在开始. 关于 Pear Admin Layui Pear Admin Layui 是一个快速,简洁且高效的 admin 前端框架,使用 La ...
最新文章
- pagefile.sys解析
- 前端三十四:内嵌框架
- Linux下CMake简明教程
- 如何快速判断某 URL 是否在 20 亿的网址 URL 集合中？
- python3精要(26）-map
- 网易云信独家技术支持，壹点灵领跑心理服务行业
- LAMP 2.2 Apache配置静态缓存
- spring boot建立项目 git推送giteee
- 机器学习从入门到精通50讲（四）-实时数仓应用实践案例
- 王者荣耀服务器维护bug,8月23日王者荣耀ios版更新一直显示维护是什么情况？更新出现bug 附处理方法...
- 鸿蒙系统的变化,鸿蒙系统没变化的背后
- [转载] ANTLR——词法分析
- “ ModuleNotFoundError: No module named ‘tkinter‘ “的解决方法
- 教程篇(7.0) 02. FortiGate基础架构 SD-WAN本地分汇 ❀ Fortinet 网络安全专家 NSE 4
- android httpclient gradle,Apache HttpClient Android (Gradle)
- java 实现生成公司的电子公章，并且盖章生成电子合同
- 人机智能的逻辑哲学论
- 如何让你的程序同时只能运行一个？
- 拿火柴游戏（拿子游戏）
- FACEGOOD-Audio2Face(个人学习)