回退到本地 bootstrap 4 css 文件

Question

这个答案：不幸的是，它似乎不适用于 BS4，即使在最后尝试了 André Rocha 的答案之后，这也是我的问题：

我正在尝试通过 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>

Answer 1

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

这里是更正后的代码，以防有人想要 see/use 它：

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

回退到本地 bootstrap 4 css 文件

fallback to local bootstrap 4 css file

css

fallback

bootstrap-4