基于Bootstrap Italia主题的Django主题，适用于卡利亚里大学（UNICAL）

导航

验证细节

这些细节已由PyPI 验证
维护者
Avatar for easyweb.wa from gravatar.com easyweb.wa Avatar for peppelinux from gravatar.com peppelinux

未经验证的细节

这些细节尚未由PyPI验证
项目链接
元数据
分类器

项目描述

符合AGID指南的卡利亚里大学Django模板

基于Bootstrap Italia库的Python Django框架图形模板，用于卡利亚里大学的应用程序。

应用程序扩展了 design-django-theme。

Home 前端: 模板的默认屏幕

需求

design-django-theme

安装

pip install django-unical-boostrap-italia
  • 在settings.py INSTALLED_APPS中插入 django_unical_bootstrap_italia。

使用

python manage.py collectstatic
  • 通过执行主要块的重载来配置base-setup.html文件，以自定义感兴趣的部分；
  • 自己的项目中的每个HTML页面都必须扩展base-setup.html并定义{ {% container %} }块的包含内容。除非单个页面上有变化，否则Header和Footer总是从base-setup.html继承而来。

样式和CSS

重新定义默认主题外观的样式表文件是 static/css/unical-style.scss。

对于离线编译 .scss 文件到 .css，生成相应的 unical-style.css，可以使用以下命令

python manage.py collectstatic

可以通过覆盖 {% extra_head %} 块来集成样式表或 JavaScript。

基本 setup.html 示例

<!-- Extends default Bootstrap Italia template -->
{% extends 'bootstrap-italia-base.html' %}

{% load static %}

<!-- Page Title -->
{% block page_title %}
Università della Calabria
{% endblock page_title %}

<!-- My custom scss sheet -->
{% block extra_head %}
<link rel="stylesheet" href="{% sass_src 'css/unical-style.scss' %}" type="text/css" />
{% endblock extra_head %}

<!-- URL link top left -->
{% block header_slim_org_url %}
https://www.unical.it
{% endblock header_slim_org_url %}

<!-- Name top left -->
{% block header_slim_org_name %}
Università della Calabria
{% endblock header_slim_org_name %}

<!-- Mobile slim_org_name -->
{% block header_slim_mobile_org_name %}
Università della Calabria
{% endblock header_slim_mobile_org_name %}

<!-- Make empty areas -->
{% block header_mobile_arrow %}{% endblock header_mobile_arrow %}
{% block header_mobile_slim_menu %}{% endblock header_mobile_slim_menu %}

<!-- Logo in Header -->
{% block header_center_logo %}
<img class="icon" src="{% static 'images/logo.png' %}" />
{% endblock header_center_logo %}

<!-- Organization name in Header -->
{% block header_center_org_name %}
Università della Calabria
{% endblock header_center_org_name %}

<!-- Organization description in Header -->
{% block header_center_org_subname %}
Il Campus per eccellenza
{% endblock header_center_org_subname %}

<!-- Logo in Footer -->
{% block footer_logo %}
<img class="icon" src="{% static 'images/logo_white.png' %}" />
{% endblock footer_logo %}

<!-- Organization name in Footer -->
{% block footer_org_name %}
Università della Calabria
{% endblock footer_org_name %}

<!-- Organization name in Footer -->
{% block footer_org_subname %}
Il Campus per eccellenza
{% endblock footer_org_subname %}

页面子代示例（此处为 index.html）

{% extends 'base-setup.html' %}

{% load static %}

{% block container %}

<div class="it-hero-wrapper it-dark it-overlay">
  <!-- - img-->
  <div class="img-responsive-wrapper">
    <div class="img-responsive">
        <div class="img-wrapper">
            <img src="{% static 'images/unical_banner.jpg' %}" title="img title" alt="imagealt">
        </div>
    </div>
  </div>
  <!-- - texts-->
  <div class="container">
    <div class="row">
        <div class="col-12">
          <div class="it-hero-text-wrapper bg-dark">
              <span class="it-category">Category</span>
              <h1 class="no_toc">Heading lorem ipsum dolor sit amet, consetetur sadipscing.</h1>
              <p class="d-none d-lg-block">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.</p>
              <div class="it-btn-container"><a class="btn btn-sm btn-secondary" href="#">Label button</a></div>
          </div>
        </div>
    </div>
  </div>
</div>



<div class="container my-4">
  <h1>Lorem Ipsum</h1>
  <p>Ab illo tempore, ab est sed immemorabili.<br/>
    Ullamco laboris nisi ut aliquid ex ea commodi consequat.<br/>
    Quis aute iure reprehenderit in voluptate velit esse.<br/>
    Petierunt uti sibi concilium totius Galliae in diem certam indicere.</p>
  <p>Pellentesque habitant morbi tristique senectus et netus.</p>

  <div class="it-carousel-wrapper it-carousel-landscape-abstract-three-cols">
  <div class="it-header-block">
    <div class="it-header-block-title">
      <h2 class="no_toc">Titolo del Carousel</h2>
    </div>
  </div>
  <div class="it-carousel-all owl-carousel it-card-bg">
    <div class="it-single-slide-wrapper">
      <div class="card-wrapper card-space">
        <div class="card card-bg">
          <div class="card-body">
            <h5 class="card-title">1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <a class="read-more" href="#">
              <span class="text">Leggi di più</span>
              <svg class="icon">
                <use xlink:href="{% static 'svg/sprite.svg' %}#it-arrow-right"></use>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="it-single-slide-wrapper">
      <div class="card-wrapper card-space">
        <div class="card card-bg">
          <div class="card-body">
            <h5 class="card-title">2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <a class="read-more" href="#">
              <span class="text">Leggi di più</span>
              <svg class="icon">
                <use xlink:href="{% static 'svg/sprite.svg' %}#it-arrow-right"></use>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="it-single-slide-wrapper">
      <div class="card-wrapper card-space">
        <div class="card card-bg">
          <div class="card-body">
            <h5 class="card-title">3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <a class="read-more" href="#">
              <span class="text">Leggi di più</span>
              <svg class="icon">
                <use xlink:href="{% static 'svg/sprite.svg' %}#it-arrow-right"></use>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="it-single-slide-wrapper">
      <div class="card-wrapper card-space">
        <div class="card card-bg">
          <div class="card-body">
            <h5 class="card-title">4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <a class="read-more" href="#">
              <span class="text">Leggi di più</span>
              <svg class="icon">
                <use xlink:href="{% static 'svg/sprite.svg' %}#it-arrow-right"></use>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="it-single-slide-wrapper">
      <div class="card-wrapper card-space">
        <div class="card card-bg">
          <div class="card-body">
            <h5 class="card-title">4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <a class="read-more" href="#">
              <span class="text">Leggi di più</span>
              <svg class="icon">
                <use xlink:href="{% static 'svg/sprite.svg' %}#it-arrow-right"></use>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="it-single-slide-wrapper">
      <div class="card-wrapper card-space">
        <div class="card card-bg">
          <div class="card-body">
            <h5 class="card-title">4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <a class="read-more" href="#">
              <span class="text">Leggi di più</span>
              <svg class="icon">
                <use xlink:href="{% static 'svg/sprite.svg' %}#it-arrow-right"></use>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="it-single-slide-wrapper">
      <div class="card-wrapper card-space">
        <div class="card card-bg">
          <div class="card-body">
            <h5 class="card-title">4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <a class="read-more" href="#">
              <span class="text">Leggi di più</span>
              <svg class="icon">
                <use xlink:href="{% static 'svg/sprite.svg' %}#it-arrow-right"></use>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</div>


{% endblock container %}

{% block bottom_scripts %}
<script src="{% static 'js/bootstrap-italia.bundle.min.js' %}"></script>

<!-- Notification per tornare alla pagina principale -->
<div class="notification dismissable with-icon" role="alert" id="notification-esempi" aria-labelledby="notification-esempi-title">
    <h5 id="notification-esempi-title">
        <svg class="icon">
            <use xlink:href="{% static 'svg/sprite.svg' %}#it-info-circle"></use>
        </svg>Esempio di template vuoto
    </h5>
    <p>
        <a href="{{ site.baseurl }}/docs/esempi/">Torna alla pagina principale degli esempi</a>
    </p>
    <button type="button" class="btn notification-close">
        <svg class="icon">
            <use xlink:href="{% static 'svg/sprite.svg' %}#it-close"></use>
        </svg>
        <span class="sr-only">Chiudi notifica: Titolo notification</span>
    </button>
</div>

<script>
$(document).ready(function() {
    notificationShow('notification-esempi');
});
</script>
{% endblock bottom_scripts %}

项目详情

验证细节

这些细节已由PyPI 验证
维护者
Avatar for easyweb.wa from gravatar.com easyweb.wa Avatar for peppelinux from gravatar.com peppelinux

未经验证的细节

这些细节尚未由PyPI验证
项目链接
元数据
分类器

发布历史 发布通知 | RSS 源

当前版本

2.0.1

1.2.0

1.0.5

1.0.4

1.0.3

1.0.2

1.0.1

1.0.0

下载文件

下载适合您平台的文件。如果您不确定选择哪个，请了解有关 安装包 的更多信息。

源分发

django-unical-bootstrap-italia-2.0.1.tar.gz (540.8 kB 查看哈希值)

上传时间 源

由以下支持