閱讀(2.6k) 書簽贊(0) 我要糾錯(cuò)

Bootstrap5 簡介

2023-06-19 14:34 更新

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

快速開始

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

CSS 文件

復(fù)制以下 <link> 標(biāo)簽并粘貼到 <head> 標(biāo)簽內(nèi)，注意，務(wù)必放到其它所有 CSS 樣式前面。

<link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet" integrity="sha384-dRYOpy/KcUgZUv3UgAdBrl5jPEmH+fTv2Vu1Bq4Wsr2/779iKnon9o5hZZVSM76I" crossorigin="anonymous">

JS 文件

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

集成包

我們提供的兩個(gè)集成包都包含了 Bootstrap 的每一個(gè) 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.1.0/dist/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  integrity="sha384-KIT91OlDmsIXvQaqzxNONuO4ve97S3yDh9A0nea67fEK+03Wdyc/3oGgd0+DPaf7" crossorigin="anonymous"></script>

分開加載

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

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  integrity="sha384-eHUUET4pt56BkNH9bTjZqK3d9mJAjuwJF3IR0yb+k7goQPFwqV5q+Bn51DOhBWkk" crossorigin="anonymous"></script>

模塊

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

Bootstrap 組件

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

顯示需要 JavaScript 的組件

消除通知（alerts）
用于切換狀態(tài)和復(fù)選框/單選框功能的按鈕
所有幻燈片行為、控件和指示器的輪播
折疊以切換內(nèi)容的可見性
用于顯示和定位的下拉菜單（也需要Popper）
用于顯示、定位和滾動(dòng)行為的模態(tài)
Navbar 用于擴(kuò)展我們的 Collapse 插件以實(shí)現(xiàn)響應(yīng)行為
用于顯示和解除的 Toast
用于顯示和定位的工具提示和彈出框（也需要Popper）
Scrollspy 用于滾動(dòng)行為和導(dǎo)航更新

入門模板

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

<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必須的 meta 標(biāo)簽 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 的 CSS 文件 -->
    <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet" integrity="sha384-dRYOpy/KcUgZUv3UgAdBrl5jPEmH+fTv2Vu1Bq4Wsr2/779iKnon9o5hZZVSM76I" crossorigin="anonymous">

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

    <!-- JavaScript 文件是可選的。從以下兩種建議中選擇一個(gè)即可！ -->

    <!-- 選項(xiàng) 1：包含 Popper 的 Bootstrap 集成包 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  integrity="sha384-KIT91OlDmsIXvQaqzxNONuO4ve97S3yDh9A0nea67fEK+03Wdyc/3oGgd0+DPaf7" crossorigin="anonymous"></script>

    <!-- 選項(xiàng) 2：Popper 和 Bootstrap 的 JS 插件各自獨(dú)立 -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  integrity="sha384-eHUUET4pt56BkNH9bTjZqK3d9mJAjuwJF3IR0yb+k7goQPFwqV5q+Bn51DOhBWkk" crossorigin="anonymous"></script>
    -->
  </body>
</html>

接下來，請?jiān)L問布局文檔或我們的官方示例作為你布局網(wǎng)站內(nèi)容和組件的參考。

重要的全局設(shè)置

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

HTML5 文檔類型（doctype）

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

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

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

Bootstrap 采用的是移動(dòng)設(shè)備優(yōu)先（mobile first）的開發(fā)策略，因此，我們首先為移動(dòng)設(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è)置不會(huì)影響計(jì)算元素的最終寬度，但是會(huì)導(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è)置的更多信息。

Reboot

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

社區(qū)

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

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

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

以上內(nèi)容是否對(duì)您有幫助：

寫筆記

我要補(bǔ)充