在 GitHub 上檢視

簡介

使用 jsDelivr 和範本入門頁面，開始使用 Bootstrap，這是世界上最受歡迎的用於建置回應式、行動裝置優先的網站的架構。

快速入門

想快速將 Bootstrap 加入您的專案嗎？使用 jsDelivr，一個免費的開源 CDN。使用套件管理員或需要下載原始檔案嗎？前往下載頁面。

CSS

在所有其他樣式表之前，將樣式表 <link> 複製貼上到您的 <head> 中，以載入我們的 CSS。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

我們的許多元件需要使用 JavaScript 才能運作。具體來說，它們需要 jQuery、Popper 和我們自己的 JavaScript 外掛程式。我們使用 jQuery 的精簡版本，但完整版本也受支援。

將 下列 <script> 之一 放置在您頁面的結尾附近，就在結束 </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/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

分開

如果您決定使用個別腳本解決方案，則 Popper 必須先出現（如果您正在使用工具提示或彈出視窗），然後才是我們的 JavaScript 外掛程式。

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

元件

好奇哪些元件明確需要 jQuery、我們的 JavaScript 和 Popper？按一下下方顯示元件連結。如果您不確定頁面結構，請繼續閱讀範例頁面範本。

顯示需要 JavaScript 的元件
  • 用於關閉的快訊
  • 用於切換狀態和核取方塊/單選按鈕功能的按鈕
  • 用於所有投影片行為、控制項和指標的輪播
  • 用於切換內容可見性的摺疊
  • 用於顯示和定位的下拉式選單（也需要 Popper）
  • 用於顯示、定位和捲動行為的對話框
  • 用於延伸我們的摺疊外掛程式以實作回應式行為的導覽列
  • 用於捲動行為和導覽更新的捲動間諜
  • 用於顯示和定位的工具提示和彈出視窗（也需要 Popper）

入門範本

請務必使用最新的設計和開發標準設定您的網頁。這表示使用 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/bootstrap@4.6.2/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/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/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/jquery@3.5.1/dist/jquery.slim.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
    -->
  </body>
</html>

這就是您對整體網頁需求所需的一切。請瀏覽 版面文件 或 我們的官方範例，開始規劃您網站的內容和元件。

重要的全域變數

Bootstrap 使用一些重要的全域樣式和設定，您在使用時需要知道這些設定，所有這些設定幾乎都專門用於標準化跨瀏覽器樣式。讓我們深入探討。

HTML5 文件類型宣告

Bootstrap 需要使用 HTML5 文件類型。如果不使用，您會看到一些不完整的奇特樣式，但包含它不應造成任何重大的問題。

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

回應式 meta 標籤

Bootstrap 是以行動裝置優先開發的，這是一種策略，我們會先針對行動裝置最佳化程式碼，然後使用 CSS 媒體查詢依需要擴充元件。為確保所有裝置都能適當呈現和觸控縮放，請將回應式視窗埠元標記新增到您的 <head>。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

您可以在 入門範本 中看到此範例的實際操作。

方塊大小

為了在 CSS 中獲得更直接的調整大小，我們將全域 box-sizing 值從 content-box 切換為 border-box。這可確保 padding 不會影響元素的最終計算寬度，但它可能會對某些第三方軟體（例如 Google 地圖和 Google 自訂搜尋引擎）造成問題。

在極少數需要覆寫它的情況下，請使用類似下列內容

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

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

在 CSS Tricks 中深入瞭解方塊模型和調整大小。

重新啟動

為了改善跨瀏覽器呈現，我們使用 重新啟動 來修正不同瀏覽器和裝置之間的不一致性，同時對常見 HTML 元素提供更明確的重設。

社群

持續關注 Bootstrap 的開發進度，並透過這些實用的資源與社群互動。

  • 閱讀並訂閱 The Official Bootstrap Blog。
  • 在 IRC 中與其他 Bootstrapper 聊天。在 irc.libera.chat 伺服器上的 #bootstrap 頻道。
  • 可以在 Stack Overflow（標記為 bootstrap-4）找到實作方面的協助。
  • 開發人員應在透過 npm 或類似傳遞機制進行配發時，針對修改或新增 Bootstrap 功能的套件使用關鍵字 bootstrap，以獲得最大的可發現性。

你也可以追蹤 @getbootstrap on Twitter 以取得最新八卦和精采音樂影片。

CSP 和嵌入式 SVG

多個 Bootstrap 元件在我們的 CSS 中包含嵌入式 SVG，以便在各種瀏覽器和裝置中一致且輕鬆地設定元件樣式。對於具有較嚴格 CSP 設定的組織，我們已記錄所有嵌入式 SVG 的執行個體（全部都透過 background-image 應用），以便你可以更全面地檢視你的選項。

根據 社群對話，在你的程式碼庫中解決此問題的一些選項包括將 URL 取代為本機託管的資產、移除圖片並使用內嵌圖片（並非所有元件都可行），以及修改你的 CSP。我們的建議是仔細檢視你自己的安全政策，並在必要時決定最佳前進路徑。