• 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模板的布局简介
  • 相关阅读:
    vue 对css样式进行修改
    vue之绑定数据+data、methods、computed、watch的基础用法
    vue安装 devtools失败的临时解决办法
    解决VMware Workstation 与 Device/Credential Guard 不兼容
    后渗透之meterpreter常用命令
    2020-7- 27
    PIL模块调整图片大小
    maven(一) maven到底是个啥玩意~
    noi前第十二场 题解
    noi前第十一场 题解
  • 原文地址：https://www.cnblogs.com/wangking/p/7753086.html
Copyright © 2020-2023  润新知