簡介

Bootstrap 是全球最受歡迎的前端框架，用于構建響應式、移動設備優先的網站。利用 jsDelivr 和我們提供的入門模板幫助你快速掌握 Bootstrap。

On this page

快速開始

如何讓項目快速用上 Bootstrap？使用 jsDelivr，這是一個免費且開源的 CDN，在你的頁面上添加幾個文件鏈接就能開始你的 Bootstrap 之旅啦。你是否在使用軟件包管理器或想下載 Bootstrap 的源文件？請轉到下載頁面查看說明。

CSS 文件

復制以下 <link> 標簽并粘貼到 <head> 標簽內，注意，務必放到其它所有 CSS 樣式前面。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-V06iGeOYiHqaJG18vU/udsyVfgcm8Pgax9HmoZh65R0FrT9X2GZZ8w2ZQcZkzZGV" crossorigin="anonymous">

JS 文件

Bootstrap 自帶的大部分組件都需要依賴 JavaScript 才能起作用。具體來說，這些組件依賴我們自己開發的 JavaScript 插件以及 Popper。復制下面的 <script> 標簽 粘貼到頁面底部，并且是在 </body> 標簽之前，就能起作用了。

集成包

我們提供的兩個集成包都包含了 Bootstrap 的每一個 JavaScript 插件。即 bootstrap.bundle.js 和 bootstrap.bundle.min.js，此外，還包含了 Popper ，用于支持工具提示（tooltip）和彈出框（popover）功能。有關 Bootstrap 中包含了哪些內容的更多信息，請參見我們的內容章節。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-m8fnrzriS+K9UdaDHdBgNfXMAURqWvA2rK5o/xq2kNx9RG3dZAcKo59qXnE9iLUU" crossorigin="anonymous"></script>

分開加載

如果你決定分開加載各個文件，那么務必按此順序，Popper 首先加載（如果你使用工具提示和彈出框的話），然后是我們提供的 JavaScript 插件。

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-gXiI6yLy2LWzzzzePznwPUNBKbmUx73ijJRHE3CnYEjeSQuldGIITSofL0fP45sf" crossorigin="anonymous"></script>

模塊

如果你使用 <script type="module"> 標簽以模塊方式加載的話，請參閱我們的將 Bootstrap 作為模塊使用章節。

Bootstrap 組件

是否好奇哪些組件明確需要我們提供的 JavaScript 插件以及 Popper？請單擊下面的組件詳情鏈接進行查看。如果完全不確定頁面的常規結構，請繼續閱讀并參考示例頁面模板。

Show components requiring JavaScript

Alerts for dismissing
Buttons for toggling states and checkbox/radio functionality
Carousel for all slide behaviors, controls, and indicators
Collapse for toggling visibility of content
Dropdowns for displaying and positioning (also requires Popper)
Modals for displaying, positioning, and scroll behavior
Navbar for extending our Collapse plugin to implement responsive behavior
Toasts for displaying and dismissing
Tooltips and popovers for displaying and positioning (also requires Popper)
Scrollspy for scroll behavior and navigation updates

入門模板

請確保使用最新的頁面設計和開發標準來設置頁面。也就是說，使用 HTML5 文檔類型（doctype）、并包含一個設置 viewport（視口）的 <meta> 標簽以實現正確的響應式布局行為。這些要求組合在一起之后，你的頁面應當如下所示：


<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
    -->
  </body>
</html>

注意，此段代碼并不能測試你的網頁是否正確安裝Bootstrap，建議你使用下面鏈接提供的模板代碼 http://www.roadlinkinfra.com/doc/read/185.html。

重要的全局設置

Bootstrap 依賴一些重要的全局樣式和設置，專門針對的是跨瀏覽器的樣式 統一化（normalization），需要你在使用 Bootstrap 之前重點了解。接下來開始我們歷險之旅吧。

HTML5 文檔類型（doctype）

Bootstrap 要求文檔類型（doctype）是 HTML5。如果沒有這一設置，你就會看到一些古怪的、不完整的樣式，因此，正確設置文檔類型（doctype）就能輕松避免這些困擾。

<!doctype html>
<html lang="zh-CN">
  ...
</html>

響應式布局相關的標簽

Bootstrap 采用的是 移動設備優先（mobile first） 的開發策略，因此，我們首先為移動設備優化代碼，然后根據需要并利用 CSS 媒體查詢功能來縮放組件。為了確保所有設備都能支持正確的渲染和觸屏縮放，請務必在 <head> 標簽中 添加讓 viewport（視口）支持響應式布局的標簽。

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

你可以在入門模板中查看此示例的實際應用。

CSS 盒模型

為了讓 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 值。

了解有關盒模型和尺寸設置的更多信息。

重置

為了提升跨瀏覽器的渲染效果，我們使用重置來糾正不同瀏覽器和設備之間的差異，并同時為常見的 HTML 元素提供更多更合適的樣式重置。

社區

掌握最新的 Bootstrap 開發進展方面的信息，并通過這些有用的資源保持與社區的練習。

閱讀并訂閱 Bootstrap 官方博客。
加入官方 Slack 會議室。
在 IRC 頻道中與 Bootstrap 同道中人聊天。記住，irc.freenode.net 服務器，##bootstrap 頻道。
在 Stack Overflow 上可以找到更實際的幫助（標簽為 bootstrap-5）。
如果開發者對 Bootstrap 進行修改或增加功能并通過類似 npm 的分發機制來發布新的軟件包的話，請務必為軟件包添加 bootstrap 關鍵字，以增加更多的曝光。

你也可以關注 @getbootstrap on Twitter 以獲取最新的八卦和超贊的音視頻。

簡介