回退到本地引导程序 4 css 文件答案

【问题标题】：fallback to local bootstrap 4 css file回退到本地引导程序 4 css 文件
【发布时间】：2018-11-25 19:24:49
【问题描述】：

这个答案：https://stackoverflow.com/a/26198380/4370354 不幸的是，即使在最后尝试了 André Rocha 的答案之后，它似乎也不适用于 BS4，所以这是我的问题：

我正在尝试通过 CDN 加载 bootstrap 4，但为了以防万一，我已准备好回退到本地 CSS 文件。

下面的代码导致 bootstrap 4 css 文件被加载两次，但我希望它只被加载一次。

这是我所拥有的（与上面的答案几乎相同）CSS文件的后备功能在最后：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Bootstrap 4.1.1 CSS CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <title>Home | phpMIDAS viewer</title>
  </head>
  <body>
    <!-- jQuery 3.3.1 CDN -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <!-- Bootstrap 4.1.1 JS CDN -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" ></script>
    <!-- Bootstrap 4.1.1 JS local fallback -->
    <script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="bootstrap/js/bootstrap.min.js"><\/script>')}</script>
    <!-- Bootstrap 4.1.1 CSS local fallback -->
    <div id="bootstrapCssTest" class="hidden"></div>
    <script>
      $(function() {
        if ($('#bootstrapCssTest').is(":visible")) {
          $("head").prepend('<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">');
        }
      });
    </script>
  </body>
</html>

【问题讨论】：

标签： css bootstrap-4 fallback

【解决方案1】：

进一步试验后，我发现我需要做的就是将class="hidden" 替换为class="collapse"。

这里是更正的代码，以防有人想查看/使用它：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Bootstrap 4.1.1 CSS CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <title>Home | phpMIDAS viewer</title>
  </head>
  <body>
    <!-- jQuery 3.3.1 CDN -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <!-- Bootstrap 4.1.1 JS CDN -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" ></script>
    <!-- Bootstrap 4.1.1 JS local fallback -->
    <script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="bootstrap/js/bootstrap.min.js"><\/script>')}</script>
    <!-- Bootstrap 4.1.1 CSS local fallback -->
    <div id="bootstrapCssTest" class="collapse"></div>
    <script>
      $(function() {
        if ($('#bootstrapCssTest').is(":visible")) {
          $("head").prepend('<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">');
        }
      });
    </script>
  </body>
</html>

【讨论】：

如果您解决了自己的问题，请选择它作为接受的答案。
完成了，我不能在发布后立即这样做。
这个.prepend()是怎么解决的？那时我会认为头部已被读取，所以它不会再处理它了？
这在什么方面比<link rel="stylesheet" href="cdn.css" onerror="this.onerror=null;this.href='local.css';" /> 更好