如何启动/测试/尝试 Bootstrap 示例？

Question

我已经从https://getbootstrap.com/docs/4.1/examples/下载了 Bootstrap 4.1 源代码。我只想测试或运行它。我认为只需打开index.html并以 HTML 文档形式查看执行的源代码就足够了。它绝对没有按预期运行。

请帮助新手。

Answer 1

在您帖子的该页面 ( https://getbootstrap.com/docs/4.1/examples/ ) 上，您有一个“下载源代码”的链接。您下载的是 Bootstrap 4.1 框架的源代码，也可以在他们的 Github 上找到： https: //github.com/twbs/bootstrap

我相信您正在寻找的是一种运行您所看到的示例模板的方法，并且您对 Bootstrap 框架背后的整个源代码不感兴趣，无法自行构建或修改它。你只是想使用它。您下载的内容可能无法满足您的需求。

要实际使用 Bootstrap，请跳转到http://getbootstrap.com/docs/4.1/getting-started/introduction/，我建议您使用他们的 CDN，如图所示（内容交付网络 - 最快、最简单的方法 -这些服务器正在为您托管 JavaScript 和 CSS 文件。如果您只想运行/演示您正在查看的示例，您甚至不需要将它们下载到您自己的磁盘上。

要使用和修改这些 Boostrap 示例（即打开index.html并查看示例：HTML、JavaScript、CSS），您将在下载的整个 Bootstrap 源代码的 ZIP 中找到它们，这就是为什么它会将您链接到整个源代码的引导程序。它们在这个目录中：

bootstrap-4.1.3.zip\bootstrap-4.1.3\site\docs\4.1\examples

让我们看一下albumZIP 存档中包含的示例。如果我们继续打开index.html，我们可以看到我们的网络浏览器将简单地加载 HTML。CSS 和JavaSript 不被执行。为了确认这一点，我们通常可以按 F12 打开大多数网络浏览器（Chrome、Firefox、Opera、IE/Edge 等）的 Web 开发人员工具，然后查看该Console部分。在这个例子中，我们看到album，我们得到了一个ERR_FILE_NOT_FOUNDfor bootstrap.min.css, popper.min.js, bootstrap.min.js, holder.min.js, favicon.ico。

让我们看一下专辑背后的代码index.html。查看第 13 行，我们可以看到： <link href="../../dist/css/bootstrap.min.css" rel="stylesheet"> 那么目录路径与 outbootstrap.min.css文件所在的位置匹配吗？第 8 行的链接也是如此。favicon.ico查看 的底部index.html，我们可以看到这是所有 JavaScript 链接的地方。首先，我们在第 226 行有一个 jQuery CDN。我们已经加载了它，所以这就是为什么我们没有看到它ERR_FILE_NOT_FOUND。此外，我们有多个 JavaScript 文件，例如popper.js和bootstrapmin.min.js等，它们可能与我们的目录结构不匹配。

提取 的所有存档bootstrap-4.1.3.zip，然后尝试打开album的index.html，我仍然看到我们实际上得到了ERR_FILE_NOT_FOUND和。这是因为他们在将您链接到磁盘/该目录结构上不存在的 JavaScript 和 CSS 文件时出错。bootstrap.min.cssbootstrap.min.js

要修复它：在第 12-13 行，将其更改为：

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

在第 229 行，更改为：

<script src="../../../../../dist/js/bootstrap.min.js"></script>

保存文件，刷新页面，示例就可以运行了。您还将看到 Web 开发人员控制台窗格中没有任何错误。

确认一下，您不需要Apache服务器或 PHP 语言（WAMP、XAMPP）。您提供的不是 PHP 文件，而是纯粹的客户端技术：CSS、JavaScript、HTML。Bootstrap是一个前端框架。