引导 CSS 未加载答案

【问题标题】：Bootstrap CSS not loading引导 CSS 未加载
【发布时间】：2014-01-28 20:07:07
【问题描述】：

我一直在尝试使用 Twitter Bootstrap，但遇到了一个我无法解决的问题。基本上，我有一个非常简单的 HTML 文件（基于本教程的开头：http://www.sitepoint.com/understanding-twitter-bootstrap-3/），我可以打开该文件，但它没有加载 CSS。

我已经在本地以及从我的 Web 服务器尝试过，在这两种情况下，CSS 都不会加载。本教程在引用的位置有一些错误，我已修复，但我在另一个教程中遇到了同样的问题。

index.html 与 CSS 文件夹位于同一文件夹中。

这是我的 HTML：

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>

<body>
<h1>Hello, world!</h1>

<script src="//code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

看在上帝的份上，请在我毁掉我的 Macbook 之前帮助我。

【问题讨论】：

任何控制台错误？是你指定的css文件吗？
按照 patrick 的建议，检查您的浏览器控制台窗口，如果它无法加载 .css 文件，它应该输出它试图查看的位置。但是，您确实提到 .css 文件与 index.html 位于同一文件夹中 - 您是否尝试将您的 href 更改为 href="bootstrap.min.css"。

标签： html css twitter-bootstrap

【解决方案1】：

尝试使用bootstrap.css 而不是bootstrap.min.css。另外，请确保它位于正确的路径中。

您也可以尝试的另一件事是在链接规范中使用media="all" 而不是media="screen"。

您的 jQuery 的 javascript 链接标签看起来很可疑。要么给出本地目录的相对路径，要么给出外部 url 的绝对路径。

【讨论】：

您可以通过这种方式引用脚本，因为它通常可以更好地应对不同的协议（意味着 http 与 https） - 我绝对同意初学者应该给它一个相对路径/绝对链接，不过.
Firebug 报告：“Bootstrap 需要 JQuery”，我从未使用过。我假设教程作者放入了一个不起作用的链接，这可能是问题所在。我正在研究 CDN，有点困惑。人们可以使用通用链接连接到 jQuery 吗？
是的，您可以从几个地方获得它（Microsoft、Google 和其他几个托管自己的地方），而 jQuery 基金会也有一个，试试这个：
您也可以下载自己的副本并将其与应用程序一起保存。只要你在本地给它正确的路径，当页面加载时浏览器应该能够找到它。通常，您是否提供绝对链接，或者您只是下载并在本地链接它都没有关系。如果您知道您的应用程序在运行时无法访问互联网，最好自己下载并以这种方式访问。
啊，好吧，显然出于某种原因，它不适用于本地存储的 CSS 文件。我正在链接到一个似乎可以正常工作的 URL。我不知道这个问题是否是我独有的，但在我的情况下，CSS 文件似乎需要托管在互联网上。谢谢大家的指导！可悲的是，这只是一些愚蠢的事情：/

【解决方案2】：

我有同样的问题，但它是独一无二的，不确定其他人是否有同样的问题。我在“href =”之前有“rel =”。只是交换位置，即在“rel=”解决问题之前的“href=”。非常感谢您提供正确的语法。

【讨论】：

您能详细说明您使用的是什么浏览器吗？因为我以前从未见过这种情况！

【解决方案3】：

我按照以下步骤加载或应用 Boostrap css。

首先检查 node_modules 中的 bootstrap 是否可用？

如果没有看到，请使用以下命令安装引导程序

npm i bootstrap

安装成功后，再次验证node_modules中的boostrap。 enter image description here

接下来打开您的项目 styles.css 文件并导入以下行。

@import '~bootstrap/dist/css/bootstrap.css';

【讨论】：

谢谢！这正是我需要的！ :)

【解决方案4】：

当您将引导文件上传到您的主机时，请确保上传所有文件，甚至是 .map 文件。我这样做了，它对我有用。

【讨论】：

.map 文件被浏览器用来帮助调试缩小的文件。他们将缩小版本映射到完整版本，以便您可以看到实际发生的情况。这不应该对输出产生影响。见stackoverflow.com/a/21768051/494356。

【解决方案5】：

我遇到了同样的问题，我解决了。

在 Windows 记事本中打开文件，选择 save_as > 在保存按钮旁边，打开编码下拉菜单并选择 UTF-8 ！

我的文件以 Unicode 编码保存。我使用 Windows 记事本以 UTF-8 编码另存为我的文件，问题就消失了。

您也可以使用 notepad++ 更改文件的编码。祝你好运

【讨论】：

【解决方案6】：

我找到了这个答案，因为它是谷歌搜索的热门搜索，但我遇到这个问题的原因完全不同。

可能和我有同样错误的朋友记得补充

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

或引用其他版本的引导程序，以便您的代码知道从哪里获取所有引导程序相关信息

【讨论】：

【解决方案7】：

听起来这只是一个简单的目录问题。您是说 HTML 文件和 CSS 文件在同一个文件夹中，对吧？然后像这样加载文件链接：

<link href="bootstrap.min.css" rel="stylesheet" media="all">

其他如果您的 css 文件位于“css”文件夹中，则将目录更改为：

<link href="css/bootstrap.min.css" rel="stylesheet" media="all">

如果情况变得更糟，请改用外部链接进行故障排除：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">

【讨论】：