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,说明本地引用成功。

相关推荐
冷雨夜中漫步1 小时前
Python快速入门(6)——for/if/while语句
开发语言·经验分享·笔记·python
郝学胜-神的一滴1 小时前
深入解析Python字典的继承关系:从abc模块看设计之美
网络·数据结构·python·程序人生
百锦再1 小时前
Reactive编程入门:Project Reactor 深度指南
前端·javascript·python·react.js·django·前端框架·reactjs
喵手3 小时前
Python爬虫实战:旅游数据采集实战 - 携程&去哪儿酒店机票价格监控完整方案(附CSV导出 + SQLite持久化存储)!
爬虫·python·爬虫实战·零基础python爬虫教学·采集结果csv导出·旅游数据采集·携程/去哪儿酒店机票价格监控
2501_944934733 小时前
高职大数据技术专业,CDA和Python认证优先考哪个?
大数据·开发语言·python
helloworldandy3 小时前
使用Pandas进行数据分析:从数据清洗到可视化
jvm·数据库·python
肖永威5 小时前
macOS环境安装/卸载python实践笔记
笔记·python·macos
TechWJ5 小时前
PyPTO编程范式深度解读:让NPU开发像写Python一样简单
开发语言·python·cann·pypto
枷锁—sha5 小时前
【SRC】SQL注入WAF 绕过应对策略(二)
网络·数据库·python·sql·安全·网络安全
abluckyboy5 小时前
Java 实现求 n 的 n^n 次方的最后一位数字
java·python·算法