标签：navbar body dem -- tar port box lap handler
ACE的具体资料可以参加其文档。这里仅介绍其布局。
ACE遵循bootstrap3的12格栅原则，12格栅原则可以参加bootstrap3的介绍。
1.ACE的整体布局
根据ACE模板的官方文档，ACE的基本布局如下：
o 1) Navbar：导航条
o Insidemain-container area:
§ 2) Sidebar：竖直选项条
§ 3) Breadcrumbs (inside"main-content")面包屑导航条
§ 4) Page content (inside"main-content")正页内容
§ 5) Settings box (inside"page-content")设置框
§ 6) Footer页底
其代码结构如下：
- <!DOCTYPE html>
- <html lang="en">
- <head>
-
- </head>
- <body class="no-skin">
- <div class="navbar" id="navbar">
-
- </div>
-
- <div class="main-container" id="main-container">
- <div class="sidebar responsive" id="sidebar">
-
- </div>
-
- <div class="main-content">
- <div class="breadcrumbs">
-
- </div>
-
- <div class="page-content">
-
-
- <div class="row">
- <div class="col-xs-12">
-
- </div>
- </div>
-
- </div>
- </div>
-
-
-
- </div>
-
-
-
- </body>
- </html>
2. NavBar的布局：
1) toggle buttons:用于下拉sidebar.
2) .navbar-header:标题.
3) .navbar-menu:一些menu和form的组合.
.navbar-buttons.navbar-header:包含用户信息.
- <div id="navbar" class="navbar navbar-default">
- <div id="navbar-container" class="navbar-container">
-
-
-
- <div class="navbar-header pull-left">
-
- </div>
-
-
- <div class="navbar-buttons navbar-header pull-right ">
- <ul class="nav ace-nav">
-
- </ul>
- </div>
-
-
- <nav class="navbar-menu pull-left">
-
- </nav>
-
- </div>
- </div>
3.sidebar的布局
1) shortcut buttons:快捷按钮
2) .nav-list:竖直选项条
3) expand/collapse button:收缩按钮
- <div class="sidebar responsive" id="sidebar">
- <div class="sidebar-shortcuts" id="sidebar-shortcuts">
- ...
- </div>
-
- <ul class="nav nav-list">
- ...
- </ul>
-
- <div class="sidebar-toggle sidebar-collapse">
- ...
- </div>
- </div>
4. 根据需要简化ACE模板
1） 简化ACE模板如下图
2) 将相关CSS和JAVASCRIPT单独成立文件，并在index.html中引用，简化index.html结构。同时index.html预留了blockpage_css 和block page_javascript两个block模块，如果页面有特殊需要的css和js，可以在这两个模块中进行填充。
以下是三个页面的大致情况：
Index.html:
head_css.html:
- {% load staticfiles %}
-
- <link rel="stylesheet" href="{%static ‘assets/css/bootstrap.min.css‘%}"/>
- <link rel="stylesheet" href="{%static ‘assets/css/font-awesome.min.css‘%}" />
-
-
-
-
- <link rel="stylesheet" href="{%static ‘assets/css/ace-fonts.css‘%}" />
-
-
- <link rel="stylesheet" href="{%static ‘assets/css/ace.min.css‘%}" id="main-ace-style‘%}" />
-
- <!--[if lte IE 9]>
- <link rel="stylesheet" href="{%static ‘assets/css/ace-part2.min.css‘%}" />
- <![endif]-->
- <link rel="stylesheet" href="{%static ‘assets/css/ace-skins.min.css‘%}" />
- <link rel="stylesheet" href="{%static ‘assets/css/ace-rtl.min.css‘%}" />
-
- <!--[if lte IE 9]>
- <link rel="stylesheet" href="{%static ‘assets/css/ace-ie.min.css‘%}" />
- <![endif]-->
-
-
-
-
- <script src="{%static ‘assets/js/ace-extra.min.js‘%}"></script>
-
-
-
- <!--[if lte IE 8]>
- <script src="{%static ‘assets/js/html5shiv.min.js‘%}"></script>
- <script src="{%static ‘assets/js/respond.min.js‘%}"></script>
- <![endif]-->
Javascript.html:
- {% load staticfiles %}
-
-
-
- <script type="text/javascript">
- window.jQuery || document.write("<script src=‘{%static ‘assets/js/jquery.min.js‘%}‘>"+"<"+"/script>");
- </script>
-
-
-
- <!--[if IE]>
- <script type="text/javascript">
- window.jQuery ||document.write("<script src=‘{%static ‘assets/js/jquery1x.min.js‘%}‘>"+"<"+"/script>");
- </script>
- <![endif]-->
- <script type="text/javascript">
- if(‘ontouchstart‘ in document.documentElement) document.write("<script src=‘{%static ‘assets/js/jquery.mobile.custom.min.js‘%}‘>"+"<"+"/script>");
- </script>
- <script src="{%static ‘assets/js/bootstrap.min.js‘%}"></script>
-
-
-
-
- <script src="{%static ‘assets/js/ace-elements.min.js‘%}"></script>
- <script src="{%static ‘assets/js/ace.min.js‘%}"></script>
-
-
-
-
- <link rel="stylesheet" href="{%static ‘assets/css/ace.onpage-help.css‘%}" />
-
-
- <script type="text/javascript"> ace.vars[‘base‘] = ‘..‘; </script>
- <script src="{%static ‘assets/js/ace/elements.onpage-help.js‘%}"></script>
- <script src="{%static ‘assets/js/ace/ace.onpage-help.js‘%}"></script>
ACE模板的布局简介
ACE模板的布局简介
标签：navbar body dem -- tar port box lap handler
原文地址：http://www.cnblogs.com/wangking/p/7753086.html
