bootstrap.min.css和bootstrap.min.js的404错误

Question

我正在建立一个网站并尝试使用Bootstrap，但是我无法成功调用bootstrap.min.css和bootstrap.min.js。

我将Bootstrap解压缩到一个名为＆＃34; Bootstrap＆＃34;的新文件夹中。在我的htdocs文件夹中。在我的Bootstrap文件夹中，我创建了一个新文件夹来存放我的网站代码，因为在组织方面，这将更容易。我还在我的.html文件中指定了＃34; bootstrap.min.css＆＃34;和＆＃34; bootstrap.min.js＆＃34;在htdocs中的以下文件路径中：

文件夹结构：

• 包含css，fonts，js，myWebsite子文件夹和test.html的Bootsrtap文件夹。

• 带有test.html的myWebsite文件夹

HTML （这是我的＆＃34; myWebsite＆＃34;文件夹中的test.html文件）：

<!-- Bootstrap -->
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">

和

<!-- 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>

我尝试从Bootstrap website运行示例代码，并且正在为这两个文件获得 404错误。

由于创建一个新文件夹，然后指定href工作，我尝试将Bootstrap网站上的示例代码直接放入我的＆＃34; Bootstrap＆＃34;文件夹，当我这样做时，它完美地运作。

HTML （这是＆＃34; Bootstrap＆＃34;文件夹中的test.html）：

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

和

<!-- 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>

我认为我指定的文件路径有一些东西，但我在上半天工作后无法让它工作。我真正要知道的是如何正确地调用＆＃34; bootstrap.min.css＆＃34;和＆＃34; bootstrap.min.js＆＃34;文件仍然保持我当前的文件夹结构？任何帮助/建议将不胜感激。

由于

Answer 1

文件的路径与您的html文件相关。对于位于Bootstrap目录中的test.html，您可以通过指向css/bootstrap.min.js和js/bootstrap.min.js来访问它们。对于位于Bootstrap / myWebsite目录中的test.html，您可以通过指向../css/bootstrap.min.js和../js/bootstrap.min.js来访问它们。 "../"将遍历一个目录到当前目录的父目录。

Answer 2

你所有的＆＃39; src＆＃39;位置需要一个前导斜杠来指示路径是相对于根文件夹（而不是当前目录）。

所以你的引导位置是这样的：

src="Bootstrap/js/bootstrap.min.js"

如果没有前导/字符，浏览器会将位置附加到当前的href位置。例如，如果请求页面位于：

http://example.com/mydir/test.html

然后浏览器会在以下位置查找引导网址：

http://example.com/mydir/Bootstrap/js/bootstrap.min.js <<< note mydir here!

在大多数情况下，您希望引用根目录中的文件，以便在导航到其他目录中的页面时不会更改这些文件。您的src位置如下所示：

src="/Bootstrap/js/bootstrap.min.js"

当你有一个前导斜杠时，浏览器会忽略当前目录并假定从你网站的根文件夹引用了url（即http://example.com/）。 这将为浏览器提供一个有效的URL，如下所示：

http://example.com/Bootstrap/js/bootstrap.min.js

哪一个是正确的。

总之，只需添加＆＃39; /＆＃39;到你的所有路径，然后它们将从你的网站的根目录中引用，并保持你正好在任何页面/目录上保持一致。

Answer 3

只需从下载的源代码目录中复制原始js和asset文件夹，然后将它们放在index.html文件所在的目录中。如有必要，请重新启动Web服务器以反映所做的更改。这对我有用：）

Answer 4

<!-- 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>

Answer 5

我在使用这些行时遇到了同样的问题

<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>

我已将它们更改为：

<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>

我现在摆脱了那个错误。我希望这会有所帮助。