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

相关推荐
独好紫罗兰几秒前
对python的再认识-基于数据结构进行-a003-列表-排序
开发语言·数据结构·python
AIFarmer8 分钟前
在EV3上运行Python语言——无线编程
python·ev3
不会代码的小测试10 分钟前
UI自动化-POM封装
开发语言·python·selenium·自动化
2401_8414956412 分钟前
【LeetCode刷题】二叉树的层序遍历
数据结构·python·算法·leetcode·二叉树··队列
ZH154558913122 分钟前
Flutter for OpenHarmony Python学习助手实战:GUI桌面应用开发的实现
python·学习·flutter
B站计算机毕业设计超人27 分钟前
计算机毕业设计Hadoop+Spark+Hive招聘推荐系统 招聘大数据分析 大数据毕业设计(源码+文档+PPT+ 讲解)
大数据·hive·hadoop·python·spark·毕业设计·课程设计
B站计算机毕业设计超人28 分钟前
计算机毕业设计hadoop+spark+hive交通拥堵预测 交通流量预测 智慧城市交通大数据 交通客流量分析(源码+LW文档+PPT+讲解视频)
大数据·hive·hadoop·python·spark·毕业设计·课程设计
CodeSheep程序羊33 分钟前
拼多多春节加班工资曝光,没几个敢给这个数的。
java·c语言·开发语言·c++·python·程序人生·职场和发展
独好紫罗兰34 分钟前
对python的再认识-基于数据结构进行-a002-列表-列表推导式
开发语言·数据结构·python
机器学习之心HML36 分钟前
多光伏电站功率预测新思路:当GCN遇见LSTM,解锁时空预测密码,python代码
人工智能·python·lstm