簡(jiǎn)介
Bootstrap 是全球最受歡迎的前端框架，用于構(gòu)建響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的網(wǎng)站。利用 jsDelivr 和我們提供的入門(mén)模板幫助你快速掌握 Bootstrap。
快速開(kāi)始
如何讓項(xiàng)目快速用上 Bootstrap？ 使用 jsDelivr，這是一個(gè)免費(fèi)且開(kāi)源的 CDN，在你的頁(yè)面上添加幾個(gè)文件鏈接就能開(kāi)始你的 Bootstrap 之旅啦。你是否在使用軟件包管理器或想下載 Bootstrap 的源文件？ 請(qǐng)轉(zhuǎn)到下載頁(yè)面查看說(shuō)明。
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 自帶的大部分組件都需要依賴(lài) JavaScript 才能起作用。具體來(lái)說(shuō)，這些組件依賴(lài)我們自己開(kāi)發(fā)的 JavaScript 插件以及 Popper。復(fù)制下面的 <script> 標(biāo)簽 粘貼到頁(yè)面底部，并且是在 </body> 標(biāo)簽之前，就能起作用了。
集成包
我們提供的兩個(gè)集成包都包含了 Bootstrap 的每一個(gè) JavaScript 插件。 即 bootstrap.bundle.js 和 bootstrap.bundle.min.js，此外，還包含了 Popper ，用于支持工具提示（tooltip）和彈出框（popover）功能。有關(guān) Bootstrap 中包含了哪些內(nèi)容的更多信息，請(qǐng)參見(jiàn)我們的 內(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>
分開(kāi)加載
如果你決定分開(kāi)加載各個(gè)文件，那么務(wù)必按此順序，Popper 首先加載（如果你使用工具提示和彈出框的話(huà)），然后是我們提供的 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)簽以模塊方式加載的話(huà)，請(qǐng)參閱我們的 將 Bootstrap 作為模塊使用 章節(jié)。
Bootstrap 組件
是否好奇哪些組件明確需要 我們提供的 JavaScript 插件以及 Popper？請(qǐng)單擊下面的組件詳情鏈接進(jìn)行查看。如果完全不確定頁(yè)面的常規(guī)結(jié)構(gòu)，請(qǐng)繼續(xù)閱讀并參考示例頁(yè)面模板。
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
入門(mén)模板
請(qǐng)確保使用最新的頁(yè)面設(shè)計(jì)和開(kāi)發(fā)標(biāo)準(zhǔn)來(lái)設(shè)置頁(yè)面。也就是說(shuō)，使用 HTML5 文檔類(lèi)型（doctype）、并包含一個(gè)設(shè)置 viewport（視口）的 <meta> 標(biāo)簽以實(shí)現(xiàn)正確的響應(yīng)式布局行為。這些要求組合在一起之后，你的頁(yè)面應(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>
注意，此段代碼并不能測(cè)試你的網(wǎng)頁(yè)是否正確安裝Bootstrap，建議你使用下面鏈接提供的模板代碼 http://m.roadlinkinfra.com/doc/read/185.html。
重要的全局設(shè)置
Bootstrap 依賴(lài)一些重要的全局樣式和設(shè)置，專(zhuān)門(mén)針對(duì)的是跨瀏覽器的樣式 統(tǒng)一化（normalization），需要你在使用 Bootstrap 之前重點(diǎn)了解。接下來(lái)開(kāi)始我們歷險(xiǎn)之旅吧。
HTML5 文檔類(lèi)型（doctype）
Bootstrap 要求文檔類(lèi)型（doctype）是 HTML5。如果沒(méi)有這一設(shè)置，你就會(huì)看到一些古怪的、不完整的樣式，因此，正確設(shè)置文檔類(lèi)型（doctype）就能輕松避免這些困擾。
<!doctype html>
<html lang="zh-CN">
...
</html>
響應(yīng)式布局相關(guān)的 標(biāo)簽
Bootstrap 采用的是 移動(dòng)設(shè)備優(yōu)先（mobile first） 的開(kāi)發(fā)策略，因此，我們首先為移動(dòng)設(shè)備優(yōu)化代碼，然后根據(jù)需要并利用 CSS 媒體查詢(xún)功能來(lái)縮放組件。為了確保所有設(shè)備都能支持正確的渲染和觸屏縮放，請(qǐng)務(wù)必在 <head> 標(biāo)簽中 添加讓 viewport（視口）支持響應(yīng)式布局的 標(biāo)簽。
<meta name="viewport" content="width=device-width, initial-scale=1">
你可以在 入門(mén)模板 中查看此示例的實(shí)際應(yīng)用。
CSS 盒模型
為了讓 CSS 中的尺寸設(shè)置更加直觀，我們將全局的 box-sizing 從 content-box 調(diào)整為 border-box。這樣可以確保 padding 的設(shè)置不會(huì)影響計(jì)算元素的最終寬度，但是會(huì)導(dǎo)致某些第三方軟件（例如 Google Maps 和 Google Custom Search Engine）出現(xiàn)問(wèn)題。
在為數(shù)不多的情況下，你需要專(zhuān)門(mén)覆蓋這一些設(shè)置，可以使用如下示例代碼：
.selector-for-some-widget {
box-sizing: content-box;
}
利用上述代碼片段，嵌套的元素（包括通過(guò) ::before 和 ::after 生成的內(nèi)容）都將繼承 .selector-for-some-widget 所指定的 box-sizing 值。
了解有關(guān) 盒模型和尺寸設(shè)置 的更多信息。
重置
為了提升跨瀏覽器的渲染效果，我們使用 重置 來(lái)糾正不同瀏覽器和設(shè)備之間的差異，并同時(shí)為常見(jiàn)的 HTML 元素提供更多更合適的樣式重置。
社區(qū)
掌握最新的 Bootstrap 開(kāi)發(fā)進(jìn)展方面的信息，并通過(guò)這些有用的資源保持與社區(qū)的練習(xí)。
- 閱讀并訂閱 Bootstrap 官方博客。
- 加入 官方 Slack 會(huì)議室。
- 在 IRC 頻道中與 Bootstrap 同道中人聊天。記住，
irc.freenode.net服務(wù)器，##bootstrap頻道。 - 在 Stack Overflow 上可以找到更實(shí)際的幫助（標(biāo)簽為
bootstrap-5）。 - 如果開(kāi)發(fā)者對(duì) Bootstrap 進(jìn)行修改或增加功能并通過(guò)類(lèi)似 npm 的分發(fā)機(jī)制來(lái)發(fā)布新的軟件包的話(huà)，請(qǐng)務(wù)必為軟件包添加
bootstrap關(guān)鍵字，以增加更多的曝光。
你也可以關(guān)注 @getbootstrap on Twitter 以獲取最新的八卦和超贊的音視頻。