首先通過CDN加載Bootstrap CSS和JS，並添加integrity和crossorigin屬性以增強安全性；2. 在CSS鏈接後添加檢測腳本，檢查document.getElementById('bootstrap-css').sheet是否存在，若不存在則動態(tài)插入本地CSS文件；3. 對於JS，檢測typeof bootstrap === 'undefined'是否成立，若成立則創(chuàng)建script標籤加載本地JS文件；4. 確保本地文件路徑正確且版本與CDN一致，以實現無縫降級。通過在CDN失敗時自動加載本地資源，可確保網站始終具備完整樣式和功能，從而提升穩(wěn)定性和用戶體驗。
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
integrityandcrossoriginattributes 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('bootstrap-css');
if (document.createStyleSheet ? !bootstrapCSS.styleSheet : !bootstrapCSS.sheet) {
const head = document.getElementsByTagName('head')[0];
const fallbackLink = document.createElement('link');
fallbackLink.href = '/css/bootstrap.min.css'; // Path to your local Bootstrap
fallbackLink.rel = 'stylesheet';
fallbackLink.type = 'text/css';
head.appendChild(fallbackLink);
}
</script>? This works because if the external CSS fails to load,
sheetwill benullorundefined.
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;"
onerror="if(!this.hasAttribute('data-fallback')){this.setAttribute('data-fallback','');this.href='/css/bootstrap.min.css';}">??
onerrordoesn't always fire reliably 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 === 'undefined') {
const script = document.createElement('script');
script.src = '/js/bootstrap.bundle.min.js'; // Local path
script.onload = function () {
console.log('Local Bootstrap loaded as fallback.');
};
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.jsEnsure 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('bootstrap-css');
if (!css.sheet) {
const fallback = document.createElement('link');
fallback.rel = 'stylesheet';
fallback.href = '/css/bootstrap.min.css';
document.head.appendChild(fallback);
}
</script>
<!-- Fallback for JS -->
<script>
if (typeof bootstrap === 'undefined') {
const script = document.createElement('script');
script.src = '/js/bootstrap.bundle.min.js';
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.
以上是如何將Bootstrap與CDN後備使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undress AI Tool
免費脫衣圖片
Undresser.AI Undress
人工智慧驅動的應用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網頁開發(fā)工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
用引導程序創(chuàng)建基本和垂直形式的最終指南
Jul 12, 2025 am 12:30 AM
使用Bootstrap創(chuàng)建表單的優(yōu)勢在於其提供一致的響應式設計，節(jié)省時間，並確?？缭O備兼容性。 1)基本表單使用簡單，如form-control和btn類。 2)垂直表單通過網格類（如col-sm-2和col-sm-10）實現更結構化的佈局。
Bootstrap網格系統與Flexbox：什麼更好？
Jul 06, 2025 am 12:42 AM
BootstrapgridSemitsbetterforquick，簡單項目; flexboxisidealForCustomizationandControl.1）bootstrapiseaseerateArtouSeanDfasterToImplement.2）FlexoxOffersMoreCustomization.3）andflexboxboxcanbemoreperformibility.3）flexboxboxboxboxboxboxboxboxboxboxboxboxboxboxboxboxboxboxcanbemoreperformant，buttheDifferferenceIsalial.Miminor.4）
引導形式：常見錯誤
Jul 14, 2025 am 12:28 AM
BootstrapFormScanLeadToErrorSlikeSusingthegridSystystem，不適當的controls，驗證，忽略customcss，可訪問性，可訪問性和性能
Bootstrap網格系統：初學者指南
Jul 09, 2025 am 01:04 AM
bootstrap'sgridsystemisesential forCreatingResponsive，ModernWebsItes.1）ItiSESA12-COLUMNLAYOUSLAYOUTFORFLEXIBLECONTENTDISPLAY.2）columnSaredSaredSaredSaredWithinRowsInsideContainer，WitwidthSlikeCol-6forHalf-Width.3）
Bootstrap網格系統：響應式佈局的綜合指南
Jul 12, 2025 am 01:23 AM
Bootstrap'sGridSystemhelpsinbuildingresponsivelayoutsbyofferingflexibilityandeaseofuse.1)Itallowsquickcreationofadaptablelayoutsacrossdevices.2)Advancedfeatureslikenestedrowsenablecomplexdesigns.3)Itencouragesaresponsivedesignphilosophy,enhancingcont
Bootstrap表格：快速獲勝的最佳模板
Jul 07, 2025 am 01:36 AM
Bootstrapformtemplatesareidealforquickwinsduetotheirsimplicity,flexibility,andeaseofcustomization.1)UseacleanlayoutwithBootstrap'sform-groupandform-controlclassesfororganizedandconsistentstyling.2)Customizecolors,sizes,andlayouttofityourbrandbyoverri
您需要了解的有關Bootstrap網格系統
Jul 13, 2025 am 01:26 AM
BootstrapGridSystemisapowerfultoolforcreatingresponsive,mobile-firstlayouts.1)Itusesa12-columngridwithclasseslike'row'and'col'forstructuringcontent.2)Breakpointslike'col-sm-6'or'col-md-4'allowlayoutstoadapttodifferentscreensizes.3)Nestinggridsandusin
如何在Bootstrap中創(chuàng)建導航欄：綜合指南
Jul 08, 2025 am 12:29 AM
使用Bootstrap創(chuàng)建導航欄的步驟包括：1.使用基本的navbar組件創(chuàng)建初始導航欄。 2.通過Bootstrap的utility類和自定義CSS進行樣式定制。 3.確保導航欄在不同設備上的響應性。 4.添加高級功能如下拉菜單和搜索欄。 5.測試和優(yōu)化導航欄的性能和用戶體驗。通過這些步驟，您可以利用Bootstrap創(chuàng)建一個功能強大且美觀的導航欄。
