第20章 · 设置样式并部署

项目3 Web应用第3阶段:使用Bootstrap美化界面并部署上线。

知识点 代码示例 章节测验(2 题)

知识点讲解

Bootstrap样式与部署

Bootstrap是流行的前端CSS框架,通过引入CDN链接即可快速美化Django页面:使用navbar导航栏、jumbotron大屏、卡片和表单样式,让应用具备现代网站的外观。将Django模板继承 base.html,统一全站布局。

部署上线

开发完成后需要部署到服务器。部署要点:关闭DEBUG模式、配置ALLOWED_HOSTS、使用WSGI服务(如Gunicorn)、由Nginx提供静态文件和反向代理、使用PostgreSQL等生产数据库、配置HTTPS。部署前务必在本地完整测试一遍所有功能。

代码示例

Bootstrap模板片段

演示Django模板引入Bootstrap。

{% extends "base.html" %}

{% block content %}
<div class="jumbotron">
  <h1 class="display-4">学习笔记</h1>
  <p class="lead">记录你学到的每一个知识点。</p>
  <a class="btn btn-primary btn-lg" href="{% url "new_topic" %}">新建主题</a>
</div>
{% endblock content %}