介紹（Introduction）

Bootstrap 是一個功能強大、功能豐富的前端工具包。從原型到正式產品，只需幾分鐘即可建構任何內容。

本頁內容

快速開始（Quick start）

透過 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> 標籤（包含用於定位下拉選單、彈出提示框和工具提示框的 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-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" 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-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
  </body>
</html>

您也可以分別引入 Popper 和我們的 JS。如果您不打算使用下拉選單、彈出提示框或工具提示框，可以不引入 Popper 來節省一些檔案大小。

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous"></script>

Hello, world! 在您選擇的瀏覽器中開啟頁面，即可看到您的 Bootstrap 頁面。現在您可以開始使用 Bootstrap 建構，建立您自己的版面配置、加入數十個元件，並使用我們的官方範例。

CDN 連結（CDN links）

以下是我們主要的 CDN 連結供您參考。

說明	URL
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 取得內容頁面中列出的任何額外建置版本。

使用 CDN 連結時，請務必使用 integrity 屬性來驗證正確的檔案和版本。這些雜湊值對於每個 Bootstrap 檔案和版本都是唯一的，因此當您更新到新版本時，請確保同時更新 integrity 屬性。

我們還加入了 crossorigin="anonymous" 屬性以防止 CORS 錯誤。

下一步（Next steps）

進一步了解 Bootstrap 使用的一些重要全域環境設定。
在我們的內容章節中了解 Bootstrap 包含的內容，以及下方需要 JavaScript 的元件列表。
需要更強大的功能？考慮透過套件管理器引入原始檔案來使用 Bootstrap 進行建構。
想要以模組方式使用 Bootstrap 搭配 <script type="module">？請參考我們的以模組方式使用 Bootstrap 章節。

JS 元件（JS components）

想知道哪些元件明確需要我們的 JavaScript 和 Popper？如果您對一般頁面結構有任何不確定，請繼續閱讀範例頁面模板。

手風琴（Accordions）用於擴展我們的摺疊外掛
警告訊息（Alerts）用於關閉功能
按鈕（Buttons）用於切換狀態和核取方塊/單選按鈕功能
輪播（Carousel）用於所有滑動行為、控制項和指示器
摺疊（Collapse）用於切換內容的可見性
下拉選單（Dropdowns）用於顯示和定位（也需要 Popper）
互動視窗（Modals）用於顯示、定位和捲動行為
導覽列（Navbar）用於擴展我們的摺疊和側邊面板外掛以實現響應式行為
導覽（Navs）搭配分頁外掛用於切換內容面板
側邊面板（Offcanvases）用於顯示、定位和捲動行為
捲動監控（Scrollspy）用於捲動行為和導覽更新
通知訊息（Toasts）用於顯示和關閉
工具提示框（Tooltips）和彈出提示框（Popovers）用於顯示和定位（也需要 Popper）

重要的全域設定（Important globals）

Bootstrap 採用了一些重要的全域樣式和設定，這些幾乎都是專門用於跨瀏覽器樣式的標準化。讓我們深入了解。

HTML5 doctype

Bootstrap 需要使用 HTML5 doctype。如果沒有它，您會看到一些奇怪且不完整的樣式。

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

Viewport meta

Bootstrap 以行動優先的方式開發，這是一種我們先為行動裝置最佳化程式碼，然後根據需要使用 CSS 媒體查詢來擴展元件的策略。為確保所有裝置上的正確渲染和觸控縮放，請將響應式 viewport meta 標籤加入您的 <head>。

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

您可以在快速開始中看到這個的實際範例。

Box-sizing

為了在 CSS 中更直觀地調整大小，我們將全域的 box-sizing 值從 content-box 切換為 border-box。這確保 padding 不會影響元素的最終計算寬度，但可能會導致某些第三方軟體（如 Google Maps 和 Google Custom Search Engine）出現問題。

在少數需要覆寫它的情況下，請使用類似以下的方式：

.selector-for-some-widget {
  box-sizing: content-box;
}

使用上述程式碼片段，巢狀元素（包括透過 ::before 和 ::after 產生的內容）都將繼承該 .selector-for-some-widget 指定的 box-sizing。

在 CSS Tricks 了解更多關於 box model 和 sizing。

Reboot

為了改善跨瀏覽器的渲染，我們使用 Reboot 來修正瀏覽器和裝置之間的不一致性，同時為常見的 HTML 元素提供略為固定的重設樣式。

社群（Community）

透過這些實用資源，隨時掌握 Bootstrap 的開發動態並與社群互動。

閱讀並訂閱 Bootstrap 官方部落格。
在我們的 GitHub Discussions 提問和探索。
在社群 Discord 或 Bootstrap subreddit 上討論、提問等。
在 IRC 與其他 Bootstrap 使用者交流。在 irc.libera.chat 伺服器的 #bootstrap 頻道。
實作上的協助可以在 Stack Overflow 找到（標記為 bootstrap-5）。
開發者在透過 npm 或類似的發布機制發布修改或擴展 Bootstrap 功能的套件時，應使用 bootstrap 關鍵字以獲得最大的可見度。

您也可以關注 X 上的 @getbootstrap 以獲得最新消息和精彩的音樂影片。