背景
之前将几个页面整合到一个网页里面了,方便日常的工作使用;
image.png
最近突然发现,页面的样式都失效了,如下:
于是请教了一下大佬,原来是网络请求的文件无法访问
1.查找原因
打开谷歌浏览器,一般按F12, 查看网络请求问题;结果可以看到很多文件访问失败。
image.png
实际上是页面调用的bootstrap.css,js文件,不想下载到本地就是用官方推荐的免费的CDN加速服务
image.png
自己直接复制这个文件,确实无法访问
2.解决方法
于是乎查找知乎,果然遇到了相同的问题;
image.png
思路:
1.使用其他的CDN服务
<!-- CSS -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<!-- JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
2使用本地的css,js文件;通过相对路径进行调用脚本
image.png
脚本下载的地址:
jquery下载地址:https://www.jq22.com/jquery-info122
bootstrap下载地址:https://v4.bootcss.com/docs/getting-started/download/
其他
https://zhuanlan.zhihu.com/p/447713250
https://www.bootcdn.cn/twitter-bootstrap/
https://www.bootcdn.cn/jquery/3.5.1/
欢迎评论交流~