Django Bootstrap 下载到本地使用,避免 CDN 超时

一、下载 Bootstrap 文件

  1. 访问 Bootstrap 官网(以 Bootstrap 5 为例):https://getbootstrap.com/docs/5.3/getting-started/download/
  2. 下载 "Compiled CSS and JS" 包(包含bootstrap.min.cssbootstrap.min.js)。

二、项目中配置静态文件

  1. 创建静态文件目录 :在项目根目录(student_system)下新建static文件夹,再在其中创建cssjs子文件夹。
  2. 放入文件 :将下载的bootstrap.min.css放入static/cssbootstrap.min.js放入static/js

三、修改 Django 配置(settings.py

settings.py末尾添加静态文件路径配置:

复制代码
import os
STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)

四、模板中引用本地 Bootstrap

在需要使用 Bootstrap 的模板(如profile.html)中,替换 CDN 链接为本地静态文件:

复制代码
{% load static %} <!-- 加载静态文件标签 -->
<head>
    <!-- 替换CDN的CSS为本地文件 -->
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
</head>
<body>
    <!-- 替换CDN的JS为本地文件(注意:Bootstrap 5依赖Popper,需一并下载) -->
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
</body>

验证

重启 Django 服务后,页面会从本地加载 Bootstrap 资源,避免 CDN 超时问题。通过浏览器开发者工具的 "网络" 面板,可看到静态文件的请求路径为/static/css/bootstrap.min.css,说明本地引用成功。

相关推荐
衫水5 小时前
ubuntu系统如何检查和安装以及运行redis
redis·ubuntu·bootstrap
多米Domi0115 小时前
0x3f第33天复习 (16;45-18:00)
数据结构·python·算法·leetcode·链表
freepopo6 小时前
天津商业空间设计:材质肌理里的温度与质感[特殊字符]
python·材质
森叶6 小时前
Java 比 Python 高性能的原因:重点在高并发方面
java·开发语言·python
小二·7 小时前
Python Web 开发进阶实战:混沌工程初探 —— 主动注入故障,构建高韧性系统
开发语言·前端·python
Lkygo7 小时前
LlamaIndex使用指南
linux·开发语言·python·llama
小二·7 小时前
Python Web 开发进阶实战:低代码平台集成 —— 可视化表单构建器 + 工作流引擎实战
前端·python·低代码
Wise玩转AI7 小时前
团队管理:AI编码工具盛行下,如何防范设计能力退化与知识浅薄化?
python·ai编程·ai智能体·开发范式
赵谨言7 小时前
Python串口的三相交流电机控制系统研究
大数据·开发语言·经验分享·python
鹿角片ljp8 小时前
Engram 论文精读:用条件记忆模块重塑稀疏大模型
python·自然语言处理·nlp