[英]404 error for bootstrap.min.css and bootstrap.min.js
I'm building a website and trying to use Bootstrap, however I'm unable to successfully call bootstrap.min.css and bootstrap.min.js.我正在构建一个网站并尝试使用 Bootstrap,但是我无法成功调用 bootstrap.min.css 和 bootstrap.min.js。
I have Bootstrap unzipped in a new folder titled "Bootstrap" in my htdocs folder.我已将 Bootstrap 解压缩到 htdocs 文件夹中名为“Bootstrap”的新文件夹中。 In my Bootstrap folder I created a new folder to house my code for my website since this, in terms of organization, would be a lot easier.
在我的 Bootstrap 文件夹中,我创建了一个新文件夹来存放我的网站代码,因为这在组织方面会容易得多。 I also specified in my .html file to look for "bootstrap.min.css" and "bootstrap.min.js" in the following filepath in htdocs:
我还在我的 .html 文件中指定在 htdocs 的以下文件路径中查找“bootstrap.min.css”和“bootstrap.min.js”:
Folder Structure :文件夹结构:
HTML (this is the test.html file in my "myWebsite" folder): HTML (这是我的“myWebsite”文件夹中的 test.html 文件):
<!-- Bootstrap -->
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
and和
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="Bootstrap/js/bootstrap.min.js"></script>
I tried running the example code off of Bootstrap's website and am getting a 404 Error for both of those files.我尝试在 Bootstrap 的网站上运行示例代码,并且这两个文件都出现404 错误。
Since creating a new folder and then specifying the href wasn't working, I tried putting the sample code from Bootstrap's website directly into my "Bootstrap" folder and when I do this it works perfectly.由于创建一个新文件夹然后指定 href 不起作用,我尝试将 Bootstrap 网站中的示例代码直接放入我的“Bootstrap”文件夹中,当我这样做时,它运行良好。
HTML (this is the test.html from the "Bootstrap" folder): HTML (这是“Bootstrap”文件夹中的 test.html):
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
and和
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
I think there is something with the filepath I specified but I've been unable to get it to work after working on it for the first half of the day.我认为我指定的文件路径有问题,但在前半天的工作之后我一直无法让它工作。 What I'd really to know is how do I correctly call the "bootstrap.min.css" and "bootstrap.min.js" files while still maintaining my current folder structure?
我真正想知道的是如何在保持当前文件夹结构的同时正确调用“bootstrap.min.css”和“bootstrap.min.js”文件? Any help/advice will be greatly appreciated.
任何帮助/建议将不胜感激。
Thanks谢谢
The paths for files are relative to your html file.文件的路径相对于您的 html 文件。 For your
test.html
located in the Bootstrap directory you can access them by pointing at css/bootstrap.min.js
and js/bootstrap.min.js
.对于位于 Bootstrap 目录中的
test.html
,您可以通过指向css/bootstrap.min.js
和js/bootstrap.min.js
来访问它们。 For your test.html located in the Bootstrap/myWebsite directory you can access them by pointing at ../css/bootstrap.min.js
and ../js/bootstrap.min.js
.对于位于 Bootstrap/myWebsite 目录中的 test.html,您可以通过指向
../css/bootstrap.min.js
和../js/bootstrap.min.js
来访问它们。 The "../"
will traverse up one directory into the parent of the current directory. "../"
将向上遍历一个目录到当前目录的父目录。
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
All your 'src' locations need a leading slash to indicate that the path is relative from the root folder (and not the current directory).所有“src”位置都需要一个前导斜杠来指示路径是相对于根文件夹(而不是当前目录)的。
So your bootstrap location is like this:所以你的引导位置是这样的:
src="Bootstrap/js/bootstrap.min.js"
Without a leading / character, the browser will append the src location to the current href location.如果没有前导 / 字符,浏览器会将 src 位置附加到当前的 href 位置。 For example, if the requesting page was at:
例如,如果请求页面位于:
http://example.com/mydir/test.html
Then the browser would look for the bootstrap url at:然后浏览器将在以下位置查找引导程序 url:
http://example.com/mydir/Bootstrap/js/bootstrap.min.js <<< note mydir here!
In most cases, you want to reference files from the root directory so that they don't change when you navigate to a page in a different directory.在大多数情况下,您希望从根目录引用文件,以便在导航到不同目录中的页面时它们不会更改。 Your src location would look like this:
您的 src 位置如下所示:
src="/Bootstrap/js/bootstrap.min.js"
When you have a leading forward slash, the browser ignores the current directory and assumes that the url is referenced from the root folder of your website (ie http://example.com/ ).当您有一个前导正斜杠时,浏览器会忽略当前目录并假定该 url 是从您网站的根文件夹(即http://example.com/ )引用的。 This would give an effective url for the browser to look up as follows:
这将为浏览器提供一个有效的网址,如下所示:
http://example.com/Bootstrap/js/bootstrap.min.js
Which would be the correct one.哪个是正确的。
In summary, simply add '/' to all your paths and they will then be referenced from the root of your website and remain consistent whatever page/directory you happen to be on.总而言之,只需将“/”添加到您的所有路径,然后它们就会从您网站的根目录中引用,并且无论您在哪个页面/目录上都保持一致。
Just copy the original js and assets folder from the source code downloaded directory, and place them inside your directory where the index.html file resides.只需从源代码下载目录中复制原始 js 和 assets 文件夹,并将它们放在 index.html 文件所在的目录中。 restart the webserver if necessary to reflect the changes.
如有必要,请重新启动网络服务器以反映更改。 This worked for me :)
这对我有用:)
I had the same problem when using these lines使用这些行时我遇到了同样的问题
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
I have changed them to:我已将它们更改为:
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
I got rid of that error now.我现在摆脱了那个错误。 I hope this is helping.
我希望这会有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.