First, load Bootstrap CSS and JS through CDN, and add integrity and crossorigin attributes to enhance security; 2. Add a detection script after the CSS link to check whether document.getElementById('bootstrap-css').sheet exists, and dynamically insert the local CSS file if it does not exist; 3. For JS, check whether typeof bootstrap === 'undefined' is true, and if it is true, create a script tag to load the local JS file; 4. Ensure that the local file path is correct and the version is consistent with the CDN to achieve seamless downgrade. By automatically loading local resources when CDN fails, you ensure that the website always has full style and functionality, improving stability and user experience.

Using Bootstrap with a CDN is fast and easy, but if the CDN fails (eg, network issues or the service is down), your site might lose styling. To avoid that, you can implement a CDN fallback —a local copy of Bootstrap that loads only if the CDN version fails.

Here's how to do it properly:

? 1. Load Bootstrap from a CDN

Start by including Bootstrap's CSS and JS from a reliable CDN like jsDelivr or BootstrapCDN :

 <!-- Bootstrap CSS from CDN -->
<link 
  id="bootstrap-css" 
  rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
  integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc9fxfkFF8ZtY"
  crossorigin="anonymous">

 <!-- Bootstrap JS (Popper Bootstrap JS) -->
<script 
  src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
  integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/ZjvEJ Zgda6dD9dTZU6KJew9rRfC7q8aKvJZ6eQ5"
  crossorigin="anonymous"></script>
<script 
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
  integrity="sha384-BB7x5k M9kLh5fMmQ7ZqjvW9hY6VrY1d3dF9Y5Q3RZ9Z5W6V5b5W4oR2g2 5q2q"
  crossorigin="anonymous"></script>

? Use integrity and crossorigin attributes for security (Subresource Integrity).

? 2. Add a Fallback for CSS

After the CDN link, check if the stylesheet loaded. If not, inject a local version.

 <script>
  // Check if Bootstrap CSS loaded
  const bootstrapCSS = document.getElementById(&#39;bootstrap-css&#39;);
  if (document.createStyleSheet ? !bootstrapCSS.styleSheet : !bootstrapCSS.sheet) {
    const head = document.getElementsByTagName(&#39;head&#39;)[0];
    const fallbackLink = document.createElement(&#39;link&#39;);
    fallbackLink.href = &#39;/css/bootstrap.min.css&#39;; // Path to your local Bootstrap
    fallbackLink.rel = &#39;stylesheet&#39;;
    fallbackLink.type = &#39;text/css&#39;;
    head.appendChild(fallbackLink);
  }
</script>

? This works because if the external CSS fails to load, sheet will be null or undefined .

Alternatively, a simpler method using onerror (but less reliable across browsers):

 <link 
  rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
  onload="this.onerror=null;" 
  oneError="if(!this.hasAttribute(&#39;data-fallback&#39;)){this.setAttribute(&#39;data-fallback&#39;,&#39;&#39;);this.href=&#39;/css/bootstrap.min.css&#39;;}">

?? onerror doesn't always fire reliable for stylesheets, so the script-check method is more robust.

? 3. Add a Fallback for JavaScript

For Bootstrap JS, you can check if a Bootstrap object (like bootstrap.Modal ) exists, and if not, load the local version.

 <script>
  // Check if Bootstrap JS loaded
  if (typeof bootstrap === &#39;undefined&#39;) {
    const script = document.createElement(&#39;script&#39;);
    script.src = &#39;/js/bootstrap.bundle.min.js&#39;; // Local path
    script.onload = function () {
      console.log(&#39;Local Bootstrap loaded as fallback.&#39;);
    };
    document.body.appendChild(script);
  }
</script>

? Make sure your local version matches the CDN version to avoid compatibility issues.

? 4. Prepare Local Bootstrap Files

Download the Bootstrap CSS and JS files from getbootstrap.com and place them in your project:

 /project-root
  /css
    bootstrap.min.css
  /js
    bootstrap.bundle.min.js

Ensure the paths in the fallback scripts match your directory structure.

? Summary: Full Example

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Bootstrap with CDN Fallback</title>
  <!-- CDN CSS -->
  <link 
    id="bootstrap-css" 
    rel="stylesheet" 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc9fxfkFF8ZtY"
    crossorigin="anonymous">
</head>
<body>
  <div class="container">Hello Bootstrap!</div>

  <!-- Popper and Bootstrap JS from CDN -->
  <script 
    src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
    integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/ZjvEJ Zgda6dD9dTZU6KJew9rRfC7q8aKvJZ6eQ5"
    crossorigin="anonymous"></script>
  <script 
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
    integrity="sha384-BB7x5k M9kLh5fMmQ7ZqjvW9hY6VrY1d3dF9Y5Q3RZ9Z5W6V5b5W4oR2g2 5q2q"
    crossorigin="anonymous"></script>

  <!-- Fallback for CSS -->
  <script>
    const css = document.getElementById(&#39;bootstrap-css&#39;);
    if (!css.sheet) {
      const fallback = document.createElement(&#39;link&#39;);
      fallback.rel = &#39;stylesheet&#39;;
      fallback.href = &#39;/css/bootstrap.min.css&#39;;
      document.head.appendChild(fallback);
    }
  </script>

  <!-- Fallback for JS -->
  <script>
    if (typeof bootstrap === &#39;undefined&#39;) {
      const script = document.createElement(&#39;script&#39;);
      script.src = &#39;/js/bootstrap.bundle.min.js&#39;;
      document.body.appendChild(script);
    }
  </script>
</body>
</html>

Basically, just link from CDN, then use a small script to detect failure and load local files. It's not complex, but it keeps your site resilient.

The above is the detailed content of How to use Bootstrap with a CDN fallback?. For more information, please follow other related articles on the PHP Chinese website!