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

 

其代码结构如下：

[html] view plain copy
 
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.  <head>  
  4.     <!-- title, meta tags, list of stylesheets, etc ... -->  
  5.  </head>    
  6.  <body class="no-skin">  
  7.     <div class="navbar" id="navbar">  
  8.      <!-- navbar goes here -->  
  9. </div>   
  10.   
  11.     <div class="main-container" id="main-container">  
  12.      <div class="sidebar responsive" id="sidebar">  
  13.       <!-- sidebar goes here -->  
  14.      </div>  
  15.     
  16.      <div class="main-content">  
  17.       <div class="breadcrumbs">  
  18.        <!-- breadcrumbs goes here -->  
  19.       </div>  
  20.      
  21.       <div class="page-content">  
  22.         <!-- setting box goes here if needed -->  
  23.   
  24.         <div class="row">  
  25.           <div class="col-xs-12">  
  26.            <!-- page content goes here -->  
  27.           </div><!-- /.col -->  
  28.         </div><!-- /.row -->  
  29.   
  30.       </div><!-- /.page-content -->  
  31.      </div><!-- /.main-content -->  
  32.        
  33.      <!-- footer area -->  
  34.   
  35.    </div><!-- /.main-container -->  
  36.   
  37.    <!-- list of script files -->  
  38.      
  39.  </body>  
  40. </html>  

 

2. NavBar的布局：

 

 

1)       toggle buttons:用于下拉sidebar.

2)     .navbar-header:标题.

3)     .navbar-menu:一些menu和form的组合.

.navbar-buttons.navbar-header:包含用户信息.

 

 

[html] view plain copy
 
  1. <div id="navbar" class="navbar navbar-default">  
  2.  <div id="navbar-container" class="navbar-container">  
  3.   
  4.     <!-- toggle buttons are here or inside brand container -->  
  5.   
  6.     <div class="navbar-header pull-left">  
  7.       <!-- brand text here -->  
  8.     </div><!-- /.navbar-header -->  
  9.   
  10.   
  11.     <div class="navbar-buttons navbar-header pull-right ">  
  12.       <ul class="nav ace-nav">  
  13.         <!-- user buttons such as messages, notifications and user menu -->  
  14.       </ul>  
  15.     </div><!-- /.navbar-buttons -->  
  16.   
  17.   
  18.     <nav class="navbar-menu pull-left">  
  19.       <!-- optional menu & form inside navbar -->  
  20.     </nav><!-- /.navbar-menu -->  
  21.   
  22.  </div><!-- /.navbar-container -->  
  23. </div><!-- /.navbar -->  

 

 

3.sidebar的布局

 

 

 

1)       shortcut buttons:快捷按钮

2)     .nav-list:竖直选项条

3)     expand/collapse button:收缩按钮

 

 

[html] view plain copy
 
  1. <div class="sidebar responsive" id="sidebar">  
  2.  <div class="sidebar-shortcuts" id="sidebar-shortcuts">  
  3.    ...  
  4.  </div>  
  5.    
  6.  <ul class="nav nav-list">  
  7.    ...  
  8.  </ul>  
  9.    
  10.  <div class="sidebar-toggle sidebar-collapse">  
  11.    ...  
  12.  </div>  
  13. </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:

[html] view plain copy
 
  1. {% load staticfiles %}  
  2.       <!-- bootstrap & fontawesome -->  
  3.       <link rel="stylesheet" href="{%static 'assets/css/bootstrap.min.css'%}"/>  
  4.       <link rel="stylesheet" href="{%static 'assets/css/font-awesome.min.css'%}" />  
  5.   
  6.       <!-- page specific plugin styles -->  
  7.   
  8.       <!-- text fonts -->  
  9.       <link rel="stylesheet" href="{%static 'assets/css/ace-fonts.css'%}" />  
  10.   
  11.       <!-- ace styles -->  
  12.       <link rel="stylesheet" href="{%static 'assets/css/ace.min.css'%}" id="main-ace-style'%}" />  
  13.   
  14.       <!--[if lte IE 9]>  
  15.       <link rel="stylesheet" href="{%static 'assets/css/ace-part2.min.css'%}" />  
  16.       <![endif]-->  
  17.       <link rel="stylesheet" href="{%static 'assets/css/ace-skins.min.css'%}" />  
  18.       <link rel="stylesheet" href="{%static 'assets/css/ace-rtl.min.css'%}" />  
  19.   
  20.       <!--[if lte IE 9]>  
  21.         <link rel="stylesheet" href="{%static 'assets/css/ace-ie.min.css'%}" />  
  22.       <![endif]-->  
  23.   
  24.       <!-- inline styles related to this page -->  
  25.   
  26.       <!-- ace settings handler -->  
  27.       <script src="{%static 'assets/js/ace-extra.min.js'%}"></script>  
  28.   
  29.       <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->  
  30.   
  31.       <!--[if lte IE 8]>  
  32.       <script src="{%static 'assets/js/html5shiv.min.js'%}"></script>  
  33.       <script src="{%static 'assets/js/respond.min.js'%}"></script>  
  34.       <![endif]-->  

 

Javascript.html:

 

[html] view plain copy
 
    1. {% load staticfiles %}  
    2.    <!-- basic scripts -->  
    3.   
    4.       <!--[if !IE]> -->  
    5.       <script type="text/javascript">  
    6.          window.jQuery || document.write("<script src='{%static 'assets/js/jquery.min.js'%}'>"+"<"+"/script>");  
    7.       </script>  
    8.   
    9.       <!-- <![endif]-->  
    10.   
    11.       <!--[if IE]>  
    12. <script type="text/javascript">  
    13.  window.jQuery ||document.write("<script src='{%static 'assets/js/jquery1x.min.js'%}'>"+"<"+"/script>");  
    14. </script>  
    15. <![endif]-->  
    16.       <script type="text/javascript">  
    17.          if('ontouchstart' in document.documentElement) document.write("<script src='{%static 'assets/js/jquery.mobile.custom.min.js'%}'>"+"<"+"/script>");  
    18.       </script>  
    19.       <script src="{%static 'assets/js/bootstrap.min.js'%}"></script>  
    20.   
    21.       <!-- page specific plugin scripts -->  
    22.   
    23.       <!-- ace scripts -->  
    24.       <script src="{%static 'assets/js/ace-elements.min.js'%}"></script>  
    25.       <script src="{%static 'assets/js/ace.min.js'%}"></script>  
    26.   
    27.       <!-- inline scripts related to this page-->  
    28.   
    29.      <!-- the following scripts are used in demo only for onpage help andyou don't need them -->  
    30.       <link rel="stylesheet" href="{%static 'assets/css/ace.onpage-help.css'%}" />  
    31.   
    32.   
    33.       <script type="text/javascript"> ace.vars['base'] = '..'; </script>  
    34.       <script src="{%static 'assets/js/ace/elements.onpage-help.js'%}"></script>  
    35.       <script src="{%static 'assets/js/ace/ace.onpage-help.js'%}"></script>  
ACE模板的布局简介
posted @ 2017-10-30 09:24  我爱吃小丸子  阅读(614)  评论(0)  编辑  收藏  举报