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

404 error for bootstrap.min.css and bootstrap.min.js

提问by Joseph Evans

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. 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. I also specified in my .html file to look for "bootstrap.min.css" and "bootstrap.min.js" in the following filepath in htdocs:

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

Folder Structure:

文件夹结构：

• Bootsrtap folder with css, fonts, js, myWebsite subfolders, and test.html.

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

• myWebsite folder with test.html

• 带有 test.html 的 myWebsite 文件夹

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 websiteand am getting a 404 Errorfor 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? Any help/advice will be greatly appreciated.

我认为我指定的文件路径有问题，但在前半天的工作之后我一直无法让它工作。我真正想知道的是如何在保持当前文件夹结构的同时正确调用“bootstrap.min.css”和“bootstrap.min.js”文件？任何帮助/建议将不胜感激。

Thanks

谢谢

回答by Joseph Evans

The paths for files are relative to your html file. For your test.htmllocated in the Bootstrap directory you can access them by pointing at css/bootstrap.min.jsand js/bootstrap.min.js. For your test.html located in the Bootstrap/myWebsite directory you can access them by pointing at ../css/bootstrap.min.jsand ../js/bootstrap.min.js. The "../"will traverse up one directory into the parent of the current directory.

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

回答by jsdeveloper

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 appendthe src location to the current href location. For example, if the requesting page was at:

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

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/). This would give an effective url for the browser to look up as follows:

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

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.

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

回答by handba

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. restart the webserver if necessary to reflect the changes. This worked for me :)

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