bootstrap.min.css和bootstrap.min.js出现404错误

Question

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

我已经将Bootstrap解压缩到我的htdocs文件夹中的一个名为“Bootstrap”的新文件夹中。在我的Bootstrap文件夹中，我创建了一个新文件夹来存放我的网站代码，因为这样更容易组织。我还在我的.html文件中指定了在htdocs中以下文件路径查找“bootstrap.min.css”和“bootstrap.min.js”。

文件夹结构：

- Bootsrtap文件夹包含css、fonts、js、myWebsite子文件夹和test.html。

• myWebsite文件夹中有test.html

HTML（这是我“myWebsite”文件夹中的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 网站 上的示例代码，但这两个文件都出现了404错误。 由于创建新文件夹并指定 href 没有起作用，我尝试直接将 Bootstrap 网站上的示例代码放入我的“Bootstrap”文件夹中，这样可以完美运行。

HTML（这是来自“Bootstrap”文件夹的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>

我认为是我指定的文件路径有问题，但在一上午的努力后，我仍然无法使其正常工作。我真正想知道的是如何正确调用"bootstrap.min.css"和"bootstrap.min.js"文件，同时保持当前的文件夹结构？非常感谢任何帮助和建议。

谢谢。

- user5514149

---

尝试使用 ../js/bootstrap.min.js。../ 表示您需要向上一级并找到 js 文件夹，因为 HTML 正在尝试在该文件夹中查找 bootstrap 文件。 - Max

谢谢您的快速回复。这是一个解决方法。我应该提到，我稍微改变了我的文件结构，不再将“myWebsite”文件夹放在“Bootstrap”文件夹中，而是直接在“htdocs”中创建了一个名为“myWebsite”的文件夹，并把“Bootstrap”放在里面。这也可以工作。 - user5514149

Answer 1

文件路径是相对于你的HTML文件而言的。如果你的test.html文件位于Bootstrap目录下，你可以通过指向css/bootstrap.min.js和js/bootstrap.min.js来访问它们。如果你的test.html文件位于Bootstrap/myWebsite目录下，你可以通过指向../css/bootstrap.min.js和../js/bootstrap.min.js来访问它们。"../"将遍历到当前目录的父目录。

- Joseph Evans

Answer 2

所有'src'位置都需要以斜杠开头，以指示路径是相对于根文件夹（而不是当前目录）的。

所以你的Bootstrap位置应该像这样：

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

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

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

接着，浏览器会查找引导 URL：

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

哪一个是正确的。

总之，只需在所有路径前添加'/'，它们就会从您网站的根目录引用，并保持不管您在哪个页面/目录上时一致。

- jsdeveloper

---

我认为对于刚开始学习路径的人来说，最好的方法是学习相对路径以及为什么它很重要。他们也在本地使用xampp服务器工作，如果他们移动整个项目文件夹或将其上传到服务器，则绝对路径可能会给他们带来麻烦。 - Joseph Evans

Answer 3

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

- Simple Code

Answer 4

当我使用这些代码时，我遇到了同样的问题。

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

我现在已经解决了那个错误。希望这能有所帮助。

- Vlad Marin

Answer 5

只需从源代码下载目录中复制原始的js和assets文件夹，并将它们放置在index.html文件所在的目录中。如果需要反映更改，请重新启动Web服务器。这对我有用 :)

- whosecode