2

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

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

文件夹结构：

  • 包含 css、字体、js、myWebsite 子文件夹和 test.html 的 Bootsrtap 文件夹。

在此处输入图像描述

  • 带有 test.html 的 myWebsite 文件夹

在此处输入图像描述

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”文件？任何帮助/建议将不胜感激。

谢谢

4

5 回答 5

4

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

于 2015-12-23T23:55:56.210 回答
2

您所有的“src”位置都需要一个前导斜杠，以指示该路径是相对于根文件夹（而不是当前目录）的路径。

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

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

哪个是正确的。

总之，只需将“/”添加到您的所有路径，然后它们将被从您网站的根目录引用，并且无论您碰巧在哪个页面/目录上都保持一致。

于 2015-12-24T00:08:21.987 回答
2 
<!-- 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>
于 2020-07-31T06:34:37.890 回答
0

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

于 2019-04-21T08:51:44.990 回答
0

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

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

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

于 2021-06-11T11:39:06.303 回答