Webapp——设置应用程序的样式并部署

发布于 2022-04-13  434 次阅读

为了设置样式，使用Bootstrap库，这是一组工具，用于为Web应用程序设置样式，使其再任何现代设备上都看起来很专业。使用应用程序django-bootstrap4，这也能够练习使用其他Django开发人远开发的应用程序。

设置项目“学习笔记”的样式

django-bootstrap4.

应用程序django-bootstrap4

使用django-bootstrap4将bootstrap继承到项目中。
这个应用程序下载必要的Bootstrap文件，将其放到项目的合适位置，让你能够在项目的模板中使用样式设置指令。
安装djangp-bootstrap4执行：

pip install django-bootstrap4

接下来需要在settings.py的INSTAKKED_APP中添加如下代码，在项目中包含应用程序django-bootstrap4
file

使用Bootstrap设置项目“学习笔记”的样式

Bootstrap是一个大型样式设置工具集合，还提供了大量模板，可应用于项目以创建独特的总体风格。
对Bootstrap初学者来说，使用模板比样式设置工具用起来容易的多。要查看Bootstrap提供的模板，访问官网Exmple中的Navbars.

修改baseHTML

需要修改模板base.html,以使用前述Bootstrap模板。下面分几部分介绍新的base.html.

1. 定义HTML头部

base.html

{% load bootstrap4 %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,
        shrink-to-fit=no">
    <title> Learning Log</title>

    {% bootstrap_css %}
    {% bootstrap_javascript jquery='full' %}
</head>

在最开始，加载django-bootstrap4中的模板标签集，接下来，将这个文件声明为使用英语，编写的HTML文档。HTML文档文件分为两个主要部分：头部（head）和主体（body）。{% bootstrap_css %}使用了django-bootstrap4的一个自定义模板标签，让Django包含所有的Bootstrap样式文件。接下来的标签启用可能在页面中使用的所有交互式行为，如可折叠的导航栏。

定义导航栏

定义页面顶部导航栏的代码很长，因为需要同时支持较窄的手机屏幕和较宽的台式计算机显示器。分三部分定义导航栏。
下面是第一部分：

{% load bootstrap4 %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,
        shrink-to-fit=no">
    <title> Learning Log</title>

    {% bootstrap_css %}
    {% bootstrap_javascript jquery='full' %}
</head>
<body>
    <nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border">
        <a class="navbar-brand" href="{% url 'learning_logs:index' %}">Learning Log</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarCollapse" aria-controls="navbarCollapse"
            aria-expanded="false" aria-label="Toggle nabigation">
            <span class="navbar-toggle-icon"></span>
        </button>
</body>
第一个元素为其实标签<body>.HTML文件的主题包含用户将在页面上看到的呢容。
<nan>元素表示页面的导航链接部分，对于这个元素内的所有内容，都将根据此处的navbar和navbar-expand-md等选择器定义的Bootstrap样式规则来设置样式。
选择器（selector）决定了样式规则将应用于页面上的哪些元素。选择器navbar-light和bg-light使用一些浅色主题来设置导航栏上的颜色。
mb-4中的mb表示下边距，这个选择器能确保导航栏和页面其他部分之间有一些空白区域，选择器border在浅色背景周围田间很细的边框，将导航栏与页面其他部分分开。

..

使用jumbortron设置主页样式。

。。。

设置登录页面样式

设置显示所有主题的页面样式

部署

安装必要的包
为了在服务器上支持Django项目提供的服务。

pip install psycopg2==2.7.*
pip install django-heroku
pip install gunicorn

为了管理Heroku使用的数据库。psycopg2包必不可少。

创建文件requirements.txt

file

指定python版本

为部署而修改setting。。

创建启动进程的Procfile。。

。。。
。。。
。。
。。
。。

赏

擦肩而过的概率