标签：文件 样式 Bootstrap js static 引用 django CSS

原因分析：Bootstrap只要正常引用了样式文件（可通过点击样式连接查看是否能打开），或者本地文件引用的情况下，要注意样式引用的地址是否正确，在django中常见原因是地址引用错误。

如下html的引用：

<!-- Bootstrap CSS-->
<link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-4.2.1.css">
<!-- Font Awesome CSS-->
<link rel="stylesheet" href="https://www.jq22.com/jquery/font-awesome.4.7.0.css">
<!-- Fontastic Custom icon font-->
<link rel="stylesheet" href="../../static/css/fontastic.css">
<!-- Google fonts - Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<!-- jQuery Circle-->
<link rel="stylesheet" href="../../static/css/grasp_mobile_progress_circle-1.0.0.min.css">
<!-- Custom Scrollbar-->
<link rel="stylesheet" href="../../static/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css">
<!-- theme stylesheet-->
<link rel="stylesheet" href="../../static/css/style.default.css" id="theme-stylesheet">
<!-- Custom stylesheet - for your changes-->
<link rel="stylesheet" href="../../static/css/custom.css">
<!-- Favicon-->
<link rel="shortcut icon" href="../../static/img/favicon.ico">

解决方案：

在html头部导入static文件路径：{% load static %}

将所有的相对路径用django的static路径拼接：...href="../../static/....xxx">改成...href={% static "....xxx" %}>

如：<link rel="stylesheet" href="../../static/css/fontastic.css">

改为：<link rel="stylesheet" href={% static "css/fontastic.css" %}>

注意：static在setting中要正确设置，一般为STATIC_URL = 'static/'，代表会查找所有名称为static的文件夹下的静态文件。

本例所使用的目录结构：

├─static
│  ├─css
│  ├─data
│  ├─fonts
│  ├─icons-reference
│  │  └─fonts
│  ├─img
│  │  ├─brand
│  │  └─flags
│  │      └─16
│  ├─js
│  └─vendor
│      ├─chart.js
│      ├─jquery-validation
│      ├─jquery.cookie
│      ├─malihu-custom-scrollbar-plugin
│      └─popper.js
│          ├─esm
│          ├─esm
└─jquery3.6.0.js

标签：文件,样式,Bootstrap,js,static,引用,django,CSS
来源： https://www.cnblogs.com/aiyablog/p/16690399.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。