ACE模板的布局简介
Posted 我爱吃小丸子
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ACE模板的布局简介相关的知识,希望对你有一定的参考价值。
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>
- <!-- 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="breadcrumbs">
- <!-- breadcrumbs goes here -->
- </div>
- <div class="page-content">
- <!-- setting box goes here if needed -->
- <div class="row">
- <div class="col-xs-12">
- <!-- page content goes here -->
- </div><!-- /.col -->
- </div><!-- /.row -->
- </div><!-- /.page-content -->
- </div><!-- /.main-content -->
- <!-- footer area -->
- </div><!-- /.main-container -->
- <!-- list of script files -->
- </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">
- <!-- toggle buttons are here or inside brand container -->
- <div class="navbar-header pull-left">
- <!-- brand text here -->
- </div><!-- /.navbar-header -->
- <div class="navbar-buttons navbar-header pull-right ">
- <ul class="nav ace-nav">
- <!-- user buttons such as messages, notifications and user menu -->
- </ul>
- </div><!-- /.navbar-buttons -->
- <nav class="navbar-menu pull-left">
- <!-- optional menu & form inside navbar -->
- </nav><!-- /.navbar-menu -->
- </div><!-- /.navbar-container -->
- </div><!-- /.navbar -->
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><!-- /.sidebar -->
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 %}
- <!-- bootstrap & fontawesome -->
- <link rel="stylesheet" href="{%static ‘assets/css/bootstrap.min.css‘%}"/>
- <link rel="stylesheet" href="{%static ‘assets/css/font-awesome.min.css‘%}" />
- <!-- page specific plugin styles -->
- <!-- text fonts -->
- <link rel="stylesheet" href="{%static ‘assets/css/ace-fonts.css‘%}" />
- <!-- ace styles -->
- <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]-->
- <!-- inline styles related to this page -->
- <!-- ace settings handler -->
- <script src="{%static ‘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="{%static ‘assets/js/html5shiv.min.js‘%}"></script>
- <script src="{%static ‘assets/js/respond.min.js‘%}"></script>
- <![endif]-->
Javascript.html:
- {% load staticfiles %}
- <!-- basic scripts -->
- <!--[if !IE]> -->
- <script type="text/javascript">
- window.jQuery || document.write("<script src=‘{%static ‘assets/js/jquery.min.js‘%}‘>"+"<"+"/script>");
- </script>
- <!-- <![endif]-->
- <!--[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>
- <!-- page specific plugin scripts -->
- <!-- ace scripts -->
- <script src="{%static ‘assets/js/ace-elements.min.js‘%}"></script>
- <script src="{%static ‘assets/js/ace.min.js‘%}"></script>
- <!-- inline scripts related to this page-->
- <!-- the following scripts are used in demo only for onpage help andyou don‘t need them -->
- <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模板的布局简介的主要内容,如果未能解决你的问题,请参考以下文章