八.ACE模板的布局简介

最新推荐文章于 2024-05-16 10:07:51 发布

静以修身养心

最新推荐文章于 2024-05-16 10:07:51 发布

阅读量1.2w

点赞数 4

分类专栏：基于Django的开源运维平台文章标签： django python 运维网络

本文链接：https://blog.csdn.net/alex_chen_16/article/details/50889924

版权

基于Django的开源运维平台专栏收录该内容

25 篇文章 47 订阅

订阅专栏

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>

静以修身养心

关注

4
点赞
踩
16

收藏

觉得还不错? 一键收藏
3
评论
八.ACE模板的布局简介

ACE的具体资料可以参加其文档。这里仅介绍其布局。ACE遵循bootstrap3的12格栅原则，12格栅原则可以参加bootstrap3的介绍。 1.ACE的整体布局根据ACE模板的官方文档，ACE的基本布局如下：o 1) Navbar：导航条o Insidemain-container area: § 2) Sidebar：竖直选项条
复制链接

扫一扫