Bootstrap Italia模板用于Django
项目描述
Bootstrap Italia模板用于Django
完全开源，基于 Bootstrap Italia 构建，继承了所有功能、组件、网格和实用工具类，遵循 公共行政部门网站设计指南。 Bootstrap Italia 使用 Designers Italia 定义的 UI Kit 模式和组件，并将其转换为可直接使用的代码。
这个用于 Python Django 框架的库提供默认模板的方案，适当分割成可重写的块，以便为项目提供符合公共行政部门网站设计指南的图形界面。
这里 可以查看所有提供的图形组件的实现代码。
安装
pip install design-django-theme
- 在 settings.py 的 INSTALLED_APPS 中添加 bootstrap_italia_template。
使用方法
python manage.py collectstatic
- 在项目模板中，创建一个名为
base.html（选择喜欢的名称）的文件，并执行 extends 操作来使用bootstrap-italia-base.html文件。这将是所有（或几乎所有）系统页面的基础图形（文件设计成类似于配置文件），是通用的； - 在
base.html中执行块的重载，以便自定义感兴趣的章节（例如，机构/组织的名称、标志等...）； - 项目中的每个页面都必须扩展
base.html并重载{% container %}块，从而继承适当自定义的<header>和<footer>设置。
日期选择器中的日期格式
要自定义表单中使用的日期选择器（日历）的日期格式，请在项目的 settings 文件中重写 JS_DEFAULT_DATE_FORMAT 参数。默认值是 "dd/MM/yyyy"。
样式和 CSS/SCSS
建议使用 SASS 3（Syntactically Awesome Style Sheets）来自定义模板的样式（颜色、尺寸、背景），以便能够在响应式环境中进行操作。
可以使用 django-sass-processor。
安装库后，可以通过在页面中重载 {% extra_head %} 块来集成样式表 .scss 并将其导入自己的页面。
CDN 与本地
可以从 CDN 获取静态文件（CSS、JS、SVG）。在项目的 settings.py 文件中，只需自定义以下参数即可
DJANGO_BOOTSTRAP_ITALIA_USE_CDN（默认 False）；DJANGO_BOOTSTRAP_ITALIA_CDN（默认 https://cdn.jsdelivr.net.cn/npm/bootstrap-italia@2.6.2/dist）；
块描述
块按 "出现" 顺序列在 bootstrap-italia-base.html 文件中。
| 块 | 描述 |
|---|---|
| {% block page_title %} | 页面的 <title> 标签 |
| {% block page_meta_description %} | 页面的标签 |
| {% block page_meta_keywords %} | 页面的标签 |
| {% block page_meta_robots %} | 页面的标签 |
| {% block extra_head %} | 额外的 CSS 或 JavaScript |
| {% block header_wrapper %} | 完整的 Header 块 |
| {% block header_slim_wrapper %} | Header 顶部的顶部条 |
| {% block header_center_wrapper_columns %} | 定义 "it-header-center-wrapper" 中网格列的类 |
| {% block header_slim_top_left %} | 包裹 header_slim_org_name 的顶部左侧条 |
| {% block header_slim_org_name %} | Header 顶部中的组织名称 |
| {% block header_slim_mobile_org_name %} | Header 顶部（移动）中的组织名称 |
| {% block header_mobile_arrow %} | Header 顶部（移动）中的子菜单箭头图标 |
| {% block header_mobile_slim_menu %} | 组织名称子菜单（移动） |
| {% block header_slim_right_zone %} | Header 顶部右侧区域 |
| {% block header_slim_sub_menu %} | Header 顶部右侧区域的子菜单 |
| {% block header_slim_buttons %} | Header 顶部右侧区域的按钮区域 |
| {% block header_brand_wrapper %} | 标志的 div 包装器 |
| {% block header_brand_text %} | 标志文本的 div 包装器 |
| {% block header_center_logo %} | 主要 Header 标志 |
| {% block header_center_org_name %} | Header 中的主要组织名称 |
| {% block header_center_org_subname %} | Header 中的组织描述 |
| {% block header_center_right_zone %} | 主要 Header 部分右侧区域 |
| {% block header_center_social %} | 主要 Header 部分中的社交图标区域 |
| {% block header_center_search %} | 主要 Header 部分的 "搜索" 区域 |
| {% block header_center_search_text %} | “搜索”中的文本区域 |
| {% block header_center_search_word %} | “搜索”文本 |
| {% block header_center_search_icon %} | “搜索”按钮图标 |
| {% block main_menu %} | 页眉中的主菜单 |
| {% block menu_links %} | 主菜单项 |
| {% block messages %} | 系统消息 |
| {% block centered_messages %} | 居中系统消息，设置边距和填充 |
| {% block container %} | 页面内容，无边距和填充 |
| {% block centered_container %} | 页面内容，居中，设置边距和填充 |
| {% block footer %} | 页脚区域 |
| {% block footer_top_section %} | 页脚顶部横幅 |
| {% block footer_logo %} | 页脚Logo |
| {% block footer_org_text %} | 页脚中的组织名称区域 |
| {% block footer_org_name %} | 页脚中的组织名称 |
| {% block footer_org_subname %} | 页脚中的组织描述 |
| {% block footer_menu_section %} | 页脚中的中央菜单部分 |
| {% block first_column %} | 页脚中央部分的第一列 |
| {% block second_column %} | 页脚中央部分的第二列 |
| {% block third_column %} | 页脚中央部分的第三列 |
| {% block fourth_column %} | 页脚中央部分的第四列 |
| {% block footer_contacts_section %} | 页脚中的联系信息部分 |
| {% block footer_bottom %} | 页脚底部横幅 |
| {% block footer_bottom_content %} | 页脚底部横幅内容 |
| {% block bottom_scripts %} | JavaScripts |
| {% block extra_scripts %} | 页面底部附加JavaScript |
基本 base.html 示例
<!-- Extends default Bootstrap Italia template -->
{% extends 'bootstrap-italia-base.html' %}
<!-- From app django-sass-processor -->
{% load sass_tags %}
{% 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 %}
Django表单字段小部件
定义了Django小部件以图形化调整表单以符合Bootstrap Italia的指导方针。
建议在使用Django表单集时，在自己的项目中使用django-form-builder库，来自卡拉布里亚大学。
为此提供专门的小部件。
相册
下载文件
下载适用于您平台的文件。如果您不确定该选择哪个，请了解有关安装包的更多信息。
源代码分发
design_django_theme-2.8.8.tar.gz (2.6 MB 查看哈希值)