開始使用 Bootstrap

Bootstrap 是一個功能強大、功能豐富的前端工具包。在幾分鐘內構建任何東西——從原型到生產。

在本頁面

快速開始

通過 CDN 包含 Bootstrap 的生產就緒 CSS 和 JavaScript 開始，無需任何構建步驟。使用此Bootstrap CodePen 演示在實踐中查看它。

index.html在項目根目錄中創建一個新文件。包括<meta name="viewport">標記以及移動設備中的正確響應行為。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

包括 Bootstrap 的 CSS 和 JS。將<link>標籤放在<head>我們的 CSS 中，並將<script>我們的 JavaScript 包的標籤（包括用於定位下拉菜單、彈出器和工具提示的 Popper）放在關閉之前</body>。詳細了解我們的CDN 鏈接。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

您也可以分別包含Popper和我們的 JS。如果您不打算使用下拉菜單、彈出框或工具提示，請通過不包括 Popper 來節省一些 KB。

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

你好世界！在您選擇的瀏覽器中打開該頁面以查看您的 Bootstrapped 頁面。現在您可以通過創建自己的佈局、添加數十個組件並利用我們的官方示例來開始使用 Bootstrap 進行構建。

CDN 鏈接

作為參考，這裡是我們的主要 CDN 鏈接。

描述	網址
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

您還可以使用 CDN 獲取我們在內容頁面中列出的任何其他構建。

下一步

閱讀更多有關Bootstrap 使用的一些重要全局環境設置的信息。
在我們的內容部分閱讀 Bootstrap 中包含的內容以及下面需要 JavaScript的組件列表。
需要更多的力量嗎？考慮通過包管理器包含源文件來使用 Bootstrap 構建。
希望將 Bootstrap 用作模塊<script type="module">？請參閱我們的使用 Bootstrap 作為模塊部分。

JS 組件

好奇哪些組件明確需要我們的 JavaScript 和 Popper？單擊下面的顯示組件鏈接。如果您對一般頁面結構完全不確定，請繼續閱讀示例頁面模板。

顯示需要 JavaScript 的組件

解僱提醒
用於切換狀態和復選框/收音機功能的按鈕
所有幻燈片行為、控件和指示器的輪播
折疊以切換內容的可見性
用於顯示和定位的下拉菜單（也需要Popper）
用於顯示、定位和滾動行為的模式
用於擴展我們的 Collapse 和 Offcanvas 插件以實現響應行為的導航欄
帶有用於切換內容窗格的 Tab 插件的導航
用於顯示、定位和滾動行為的畫布
用於滾動行為和導航更新的 Scrollspy
用於顯示和關閉的祝酒詞
用於顯示和定位的工具提示和彈出框（也需要Popper）

重要的全局變量

Bootstrap 採用了一些重要的全局樣式和設置，所有這些幾乎都專門針對跨瀏覽器樣式的規範化。讓我們潛入水中。

HTML5 文檔類型

Bootstrap 需要使用 HTML5 文檔類型。沒有它，您會看到一些時髦且不完整的樣式。

<!doctype html>
<html lang="en">
  ...
</html>

響應式元標記

Bootstrap 是移動優先開發的，這是一種策略，我們首先優化移動設備的代碼，然後根據需要使用 CSS 媒體查詢擴展組件。為確保所有設備的正確渲染和触摸縮放，請將響應式視口元標記添加到您的<head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

您可以在快速入門中看到一個這樣的例子。

盒子尺寸

為了在 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 博客。
詢問並探索我們的 GitHub 討論。
與 IRC 中的 Bootstrapper 同事聊天。在irc.libera.chat服務器上，在#bootstrap頻道中。
可以在 Stack Overflow 上找到實現幫助（標記為bootstrap-5）。
當通過npm或類似的交付機制bootstrap分發時，開發人員應在修改或添加到 Bootstrap 功能的包上使用關鍵字，以獲得最大的可發現性。

您還可以在 Twitter 上關注 @getbootstrap 以獲取最新的八卦和精彩的音樂視頻。