首页 > 其他分享> 文章详细

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

2019-05-13 15:52:31 阅读：229 来源： 互联网

标签：stark html base 组件 block 页面

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 页面为例：

change_view.html

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

标签：stark,html,base,组件,block,页面
来源： https://www.cnblogs.com/xyhh/p/10856956.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

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

base.html