Python编程-数据可视化：第20章-设置应用程序的样式并部署

前，项目“学习笔记”虽然功能齐备，但未设置样式，也只能在本地计算机上运行。在本章中，我们将以简单而专业的方式设置这个项目的样式，再将其部署到一台服务器上，让世界上的任何人都能够建立账户。

为设置样式，我们将使用Bootstrap库，这是一组工具，用于为Web应用程序设置样式，使其在任何现代设备上都看起来很专业，无论是大型的平板显示器还是智能手机。为此，我们将使用应用程序django-bootstrap4，这也让你能够练习使用其他Django开发人员开发的应用程序。

应用程序`django-bootstrap4`

django-bootstrap4 应用程序

pip install django-bootstrap4

加载django-bootstrap4应用程序
settings.py

--snip--  
INSTALLED_APPS = [  
# 我的应用程序  
'learning_logs',  
'users',  
  
# 第三方应用程序  
'bootstrap4',  
  
# Django默认添加的应用程序  
'django.contrib.admin',  
--snip--

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

定义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>

定义导航栏
base.html

 <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 navigation">  
<span class="navbar-toggler-icon"></span></button>