簡介
Bootstrap 是全球最受歡迎的前端框架，用于構(gòu)建響應(yīng)式、移動設(shè)備優(yōu)先的網(wǎng)站。利用 jsDelivr 和我們提供的入門模板幫助你快速掌握 Bootstrap。
快速開始
如何讓項(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 以獲取最新的八卦和超贊的音視頻。