簡介

Bootstrap 是全球最受歡迎的前端框架，用于構(gòu)建響應(yīng)式、移動設(shè)備優(yōu)先的網(wǎng)站。利用 jsDelivr 和我們提供的入門模板幫助你快速掌握 Bootstrap。

On this page

快速開始

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

CSS 文件

復(fù)制以下 <link> 標(biāo)簽并粘貼到 <head> 標(biāo)簽內(nèi)，注意，務(wù)必放到其它所有 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 才能起作用。具體來說，這些組件依賴我們自己開發(fā)的 JavaScript 插件以及 Popper。復(fù)制下面的 <script> 標(biāo)簽 粘貼到頁面底部，并且是在 </body> 標(biāo)簽之前，就能起作用了。

集成包

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

<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>

分開加載

如果你決定分開加載各個文件，那么務(wù)必按此順序，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"> 標(biāo)簽以模塊方式加載的話，請參閱我們的將 Bootstrap 作為模塊使用章節(jié)。

Bootstrap 組件

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

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

入門模板

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


<!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>

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

重要的全局設(shè)置

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

HTML5 文檔類型（doctype）

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

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

響應(yīng)式布局相關(guān)的標(biāo)簽

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

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

你可以在入門模板中查看此示例的實(shí)際應(yīng)用。

CSS 盒模型

為了讓 CSS 中的尺寸設(shè)置更加直觀，我們將全局的 box-sizing 從 content-box 調(diào)整為 border-box。這樣可以確保 padding 的設(shè)置不會影響計算元素的最終寬度，但是會導(dǎo)致某些第三方軟件（例如 Google Maps 和 Google Custom Search Engine）出現(xiàn)問題。

在為數(shù)不多的情況下，你需要專門覆蓋這一些設(shè)置，可以使用如下示例代碼：

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

利用上述代碼片段，嵌套的元素（包括通過 ::before 和 ::after 生成的內(nèi)容）都將繼承 .selector-for-some-widget 所指定的 box-sizing 值。

了解有關(guān) 盒模型和尺寸設(shè)置的更多信息。

重置

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

社區(qū)

掌握最新的 Bootstrap 開發(fā)進(jìn)展方面的信息，并通過這些有用的資源保持與社區(qū)的練習(xí)。

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

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

簡介