stark 组件基础页面base.html 文件

base.html

1. base.html 页面是 ： stark组件增，删，改，查页面的公共部分，如头部导航栏，左侧的用户权限列表栏等。

2. base.html 页面结构：

（1）公共部分的代码区域。（其他模板通过继承）。

（2）css 自定义部分，js 自定义部分，内容自定义部分，权限栏部分等（红色区域部分）。

下面问stark组件base.html文件

{% load staticfiles %}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CRM</title>

    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">

    <link rel="shortcut icon" href="/static/imgs/luffy-study-logo.png">

    <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.css">

    <link rel="stylesheet" href="/static/css/commons.css ">

    <link rel="stylesheet" href="/static/css/nav.css">

    <script src="/static/js/jquery-3.3.1.min.js"></script>

    <style>

        .pg-body > .left-menu {

            background-color: #F3F3F3;

            position: absolute;

            left: 1px;

            top: 60px;

            bottom: 0;

            width: 220px;

            overflow: auto;

        }

        .pg-body > .right-body {

            position: absolute;

            left: 225px;

            right: 0;

            top: 60px;

            bottom: 0;

            overflow: scroll;

            border-top: 0;

            font-size: 13px;

            min-width: 755px;

            padding: 20px;

        }

        .dropdown-menu {

            top: 118%;

            left: -108px;

        }

        a:hover{

                text-decoration: none!important;

            }

    </style>

   {% block css %}

   {% endblock %}

</head>

<body>

<div class="pg-header">

    <div class="nav">

        <div class="logo-area left">

            <a href="#">

                <img class="logo" src="{% static 'imgs/logo.svg' %}">

                <span style="font-size: 18px;">CRM </span>

            </a>

        </div>

        <div class="left-menu left">

            <a class="menu-item">资产管理</a>

            <a class="menu-item">用户信息</a>

            <a class="menu-item">权限管理</a>

            <div class="menu-item">

                <span>使用说明</span>

                <i class="fa fa-caret-down" aria-hidden="true"></i>

                <div class="more-info">

                    <a href="#" class="more-item">666</a>

                    <a href="#" class="more-item">888</a>

                </div>

            </div>

        </div>

        <div class="right-menu right clearfix">

            <!-- Single button -->

            <div class="btn-group user-info right">

              <img class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" width="50" height="50" class="img-circle" src="{% static 'imgs/default.jpg' %}">

              <ul class="dropdown-menu small">

                <li><a href="#" class="more-item">个人信息</a></li>

                <li><a href="/logout/" class="more-item">注销</a></li>

                <li><a href="/home/">修改密码</a></li>

                <li><a href="/home/">更换头像</a></li>

              </ul>

            </div>

            <a class="user-menu right">

                <i class="fa fa-user" aria-hidden="true"></i>

                <span>{{ request.user }}</span>

            </a>

            <a class="user-menu right">

                消息

                <i class="fa fa-commenting-o" aria-hidden="true"></i>

                <span class="badge bg-success">2</span>

            </a>

            <a class="user-menu right">

                通知

                <i class="fa fa-envelope-o" aria-hidden="true"></i>

                <span class="badge bg-success">2</span>

            </a>

            <a class="user-menu right">

                任务

                <i class="fa fa-bell-o" aria-hidden="true"></i>

                <span class="badge bg-danger">4</span>

            </a>

        </div>

    </div>

</div>

<div class="pg-body">

        <div class="left-menu">

             {% block side_bar %}

                {% load rbac %}

                {% get_menu request %}

             {% endblock side_bar %}

        </div>

    <div class="right-body">

         {% block content %}

         {% endblock content %}

    </div>

</div>

{% block js %}

 {% endblock %}

</body>

</html>

（3）.stark组件增删改查页面的，继承语句

{% extends "stark/base.html" %}

以change._view.html 页面为例：

{% extends "stark/base.html" %}

{% block css %}

<style>

        .error{

            color: red;

        }

        h3{

            text-align: center;

        }

    </style>

{% endblock %}

{% block content %}

<div class="container-fluid">

    <div class="row">

        <div class="col-md-6 col-md-offset-3">

            <h3>编辑{{ table_name }}</h3>

            {% include "stark/formbase.html" %}

        </div>

    </div>

</div>

{% endblock %}

change_view.html

(4) stark 组件中，一些静态文件，font-awesome 字体图标文件夹。以及js,bootstrap.css文件等，主要是组件的依赖文件。imgs 主要用于base.html 导航栏中的图片。

stark组件base.html的更多相关文章

  1. stark组件的分页，模糊查询，批量删除

    1.分页组件高阶 2.整合展示数据showlist类 3.stark组件之分页 3.stark组件之search模糊查询 4.action批量处理数据 4.总结 1.分页组件高阶 1.分页的class ...

  2. day 68crm(5) 分页器的进一步优化,以及在stark上使用分页器,,以及,整理代码,以及stark组件search查询

    前情提要: 本节内容 自定制分页器 保存及查询记录 代码整理, stark组件search 查询    一:自定制分页器 page 1:创建类 Pagination  # 自定制分页器 _ _init ...

  3. 【django之stark组件】

    一.需求 仿照django的admin,开发自己的stark组件.实现类似数据库客户端的功能,对数据进行增删改查. 二.实现 1.在settings配置中分别注册这三个app # Applicatio ...

  4. django 之 stark组件

    ----------------------------------------------------------------烦恼没完没了,内心动荡不安,呜呼哀哉. 一.有个特殊的需求,需要用sta ...

  5. 设计stark组件

    设计stark组件 作者:Eric 微信:loveoracle11g 新建Django项目crm_1随便起名 然后再创建一个App manage.py@crm_1 > startapp star ...

  6. stark组件配置，二层URL

    1.django的admin配置 2 stark组件开发 3.2层url分发 4.小结 1.django的admin配置 model.py from django.db import models # ...

  7. CRM项目之stark组件

    . stark也是一个app(用startapp stark创建),目标时把这个做成一个可以拔插的组件 . setting文件下INSTALLED_APPS 路径要配置好(app的注册) . 写好si ...

  8. stark组件开发之列表页面应用示例

    已经解决的,自定义的扩展函数,功能.但是 不可能返回. 一个 固定的页面把!  应该是,点击那条 记录之后的编辑, 就会跳转到相应的,编辑页面.所以 这个标签的  <a href="/ ...

  9. Django之stark组件

    现在让我说啥是stark组件,我也说不清楚.反正从今天讲的知识来看,今天完成的就是自己写一个模块,这个模块包含了admin后台管理工具的一些比较好用的功能,我们把它提炼出来,也就是相当于自己写一个ad ...

随机推荐

  1. Logstash Introduction

    https://www.cnblogs.com/aresxin/p/8035137.html Elasticsearch是个开源分布式搜索引擎,提供搜集.分析.存储数据三大功能.它的特点有:分布式,零 ...

  2. FancyBox的使用技巧 (汇总)

    http://note.youdao.com/share/?id=1c8373249f523529a6b6dcde60777400&type=note#/

  3. Spring核心简介

    Spring简介 Spring是一个开源.轻量级框架.在诞生之初,创建Spring的主要目的是用来替代更加重量级的企业级Java技术,尤其是EJB(Enterprise JavaBean).从最初的挑 ...

  4. hotmail 发送邮件 的服务器地址如下

    hotmail的服务器地址如下: pop服务器地址:pop-mail.outlook.com smtp服务器地址:smtp-mail.outlook.com imap服务器地址:imap-mail.o ...

  5. C# winform程序防止前台卡死

    https://blog.csdn.net/Emiedon/article/details/51069193 在实际开发中,如果需要实时的显示后台处理的情况,我们可能要在前台用一些控件去显示 所以我们 ...

  6. P4390 [BOI2007]Mokia 摩基亚（cdq分治）

    一样是cdq的板子 照着园丁的烦恼就好了 代码 #include <cstdio> #include <cstring> #include <algorithm> ...

  7. Google advertiser 开发

    开发 相关知识: 单一归因与多重归因 当展示广告网络上发生一次展示时,您可按单一归因或多重归因记录对展示起到影响作用的条件. 单一归因 在使用单一归因时,系统只为指定的展示记录一个触发条件(如展示位置 ...

  8. HDU 6212 Zuma（区间dp）

    http://acm.hdu.edu.cn/showproblem.php?pid=6212 题意:有一行的祖玛,只由1和0组成,每次出现连续三个及以上的就会消去,问你最少需要发射多少个球才能消完. ...

  9. Java—网络编程基础

    URL的应用: 获得网页源代码可以用字节流.字符流,流的获取可以用url.openStream(),也可以用con.getInputStream(): 字节流: URL url = new URL(& ...

  10. git介绍和常用命令总结

    git中经常用的命令就是以下六个: 以下是命令总结: 另外,自己碰到的问题及解决方法: 在分支内提交远程仓库,-am: revert后进入vim,一直按住esc ,再连续按大写的z两次就退出来了: g ...