Django站点CSS、JavaScript及Bootstrap样式不加载如何解决？

不需要将Bootstrap下载到本地，你当前使用的是Bootstrap官方CDN引用，只要链接配置正确即可正常加载样式。你的样式失效主要有以下几个可直接修复的问题：

1. 修复CDN资源的完整性校验错误 #

你代码里的3个静态资源的integrity校验值都存在格式错误，浏览器会因为校验不通过拒绝加载资源：

• Bootstrap CSS的integrity值中间存在多余的换行和空格，修正后完整的CSS引用为：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

• jQuery的integrity值中间存在多余的反斜杠和换行，修正后完整的jQuery引用为：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

• Bootstrap JS的integrity值缺失了sha384后的连接符-，修正后完整的Bootstrap JS引用为：

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

2. 给页面元素添加Bootstrap样式 #

你当前的表单、按钮等元素没有添加Bootstrap对应的类名，所以即使CSS加载成功也会和教材展示效果有差距：

• 给所有提交按钮添加Bootstrap按钮类，比如登录、注册按钮修改为：

<button type="submit" class="btn btn-primary">Sign Up</button>

• 若要让Django表单自动适配Bootstrap样式，可以安装django-crispy-forms扩展：
  • 执行安装命令：pip install django-crispy-forms
  • 在settings.py的INSTALLED_APPS中添加'crispy_forms'
  • 在settings.py末尾添加配置：CRISPY_TEMPLATE_PACK = 'bootstrap4'
  • 在所有使用表单的模板顶部添加{% load crispy_forms_tags %}，将{{ form.as_p }}修改为{{ form|crispy }}即可

3. 常规排查方式 #

如果修改后样式仍未生效，按F12打开浏览器开发者工具，切换到Console/网络面板，刷新页面查看是否有资源加载失败的报错，根据报错信息针对性调整即可。

内容的提问来源于stack exchange，提问作者fatbrokekid