介紹
開始使用 Bootstrap，它是世界上最流行的構建響應式、移動優先網站的框架，帶有 jsDelivr 和模板起始頁。
快速開始
想要快速將 Bootstrap 添加到您的項目中？使用 jsDelivr，一個免費的開源 CDN。使用包管理器還是需要下載源文件？前往下載頁面。
CSS
將樣式表複製粘貼<link>到<head>所有其他樣式表之前，以加載我們的 CSS。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
JS
我們的許多組件都需要使用 JavaScript 才能運行。具體來說，它們需要jQuery、Popper和我們自己的 JavaScript 插件。我們使用jQuery 的 slim build，但也支持完整版。
將以下<script>s之一放置在頁面末尾附近，就在結束</body>標記之前，以啟用它們。jQuery 必須先出現，然後是 Popper，然後是我們的 JavaScript 插件。
捆
將每個 Bootstrap JavaScript 插件包含在我們的兩個捆綁包之一中。兩者都bootstrap.bundle.js包括bootstrap.bundle.min.js用於我們的工具提示和彈出框的Popper，但不包括jQuery。首先包含 jQuery，然後是 Bootstrap JavaScript 包。有關 Bootstrap 中包含的內容的更多信息，請參閱我們的內容部分。
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
分離
如果您決定使用單獨的腳本解決方案，則必須首先使用 Popper（如果您使用工具提示或彈出框），然後是我們的 JavaScript 插件。
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
成分
好奇哪些組件明確需要 jQuery、我們的 JavaScript 和 Popper？單擊下面的顯示組件鏈接。如果您不確定頁面結構，請繼續閱讀示例頁面模板。
顯示需要 JavaScript 的組件
入門模板
請務必使用最新的設計和開發標准設置您的頁面。這意味著使用 HTML5 文檔類型並包含一個視口元標記以實現正確的響應行為。將它們放在一起，您的頁面應如下所示：
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
-->
</body>
</html>
這就是整體頁面要求所需的全部內容。訪問佈局文檔或我們的官方示例，開始佈局您網站的內容和組件。
重要的全局變量
Bootstrap 採用了一些重要的全局樣式和設置，您在使用它時需要注意它們，所有這些幾乎都專門用於跨瀏覽器樣式的規範化。讓我們潛入水中。
HTML5 文檔類型
Bootstrap 需要使用 HTML5 文檔類型。沒有它，您會看到一些時髦的不完整樣式，但包括它不應該引起任何嚴重的問題。
<!doctype html>
<html lang="en">
...
</html>
響應式元標記
Bootstrap 是移動優先開發的，這是一種策略，我們首先優化移動設備的代碼，然後根據需要使用 CSS 媒體查詢擴展組件。為確保所有設備的正確渲染和触摸縮放，請將響應式視口元標記添加到您的<head>.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
您可以在starter 模板中看到一個這樣的例子。
盒子尺寸
為了在 CSS 中更直接地調整大小，我們將全局box-sizing值從切換content-box到border-box. 這確保padding不會影響元素的最終計算寬度，但可能會導致某些第三方軟件出現問題，例如穀歌地圖和谷歌自定義搜索引擎。
在極少數情況下您需要覆蓋它，請使用以下內容：
.selector-for-some-widget {
box-sizing: content-box;
}
使用上面的代碼片段，嵌套元素——包括通過::beforeand生成的內容::after——都將繼承box-sizing為 that指定的內容.selector-for-some-widget。
在 CSS Tricks了解更多關於盒子模型和大小的信息。
重啟
為了改進跨瀏覽器呈現，我們使用Reboot來糾正跨瀏覽器和設備的不一致，同時對常見的 HTML 元素提供稍微更自以為是的重置。
社區
隨時了解 Bootstrap 的最新發展，並通過這些有用的資源與社區聯繫。
- 閱讀並訂閱官方 Bootstrap 博客。
- 與 IRC 中的 Bootstrapper 同事聊天。在
irc.libera.chat服務器上，在#bootstrap頻道中。 - 可以在 Stack Overflow 上找到實現幫助（標記為
bootstrap-4）。 - 當通過npm或類似的交付機制
bootstrap分發時，開發人員應在修改或添加到 Bootstrap 功能的包上使用關鍵字，以獲得最大的可發現性。
您還可以在 Twitter 上關注 @getbootstrap 以獲取最新的八卦和精彩的音樂視頻。
CSP 和嵌入式 SVG
一些 Bootstrap 組件在我們的 CSS 中包含嵌入的 SVG，以在瀏覽器和設備上一致且輕鬆地為組件設置樣式。對於具有更嚴格CSP配置的組織，我們記錄了嵌入式 SVG 的所有實例（所有這些實例都通過 應用background-image），因此您可以更徹底地查看您的選項。
根據社區對話，在您自己的代碼庫中解決此問題的一些選項包括用本地託管的資產替換 URL、刪除圖像並使用內聯圖像（並非在所有組件中都可能）以及修改您的 CSP。我們的建議是仔細審查您自己的安全策略，並在必要時確定最佳前進路徑。