Bootstrap5 教程

Bootstrap 教程

Bootstrap 是全球最受歡迎的前端組件庫,用於開發響應式布局、移動設備優先的 WEB 項目。

Bootstrap5 目前是 Bootstrap 的最新版本,是一套用於 HTML、CSS 和 JS 開發的開源工具集。它支持 Sass 變量和 mixins、響應式網格係統、大量的預建組件和強大的 JavaScript 插件,助你快速設計和自定義響應式、移動設備優先的站點。

誰適合閱讀本教程?

隻要您具備 HTML 和 CSS 的基礎知識,您就可以閱讀本教程,進而開發出自己的網站。在您學習完本教程後,您即可達到使用 Bootstrap 開發 Web 項目的中等水平。

閱讀本教程前,您需要了解的知識:

在您開始閱讀本教程之前,您必須具備 HTML 、 CSS 和 JavaScript 的基礎知識。如果您還不了解這些概念,那麼建議您先閱讀我們的這些教程:

為什麼使用 Bootstrap

  • 容易上手:隻要對 HTML 和 CSS 有基本了解的人都可以很快速的使用 Bootstrap。

  • 響應式設計:Bootstrap 可以根據不同平台(手機、平板電腦和台式機)進行調整。

  • 移動優先:在 Bootstrap 中,自適應移動端是框架的核心部分。

  • 瀏覽器兼容性:Bootstrap5 兼容所有主流瀏覽器(Chrome、Firefox、Edge、Safari 和 Opera)。 如果您需要支持 IE11 及以下版本,請使用 Bootstrap4 或 Bootstrap3。

Bootstrap5 實例

以下是一個簡單的 Bootstrap5 實例:

Bootstrap5 實例

<div class="container-fluid p-5 bg-primary text-white text-center"> <h1>我的第一個 Bootstrap 頁麵</h1> <p>這是一個響應式頁麵,重置瀏覽器大小查看效果!</p> </div> <div class="container mt-5"> <div class="row"> <div class="col-sm-4"> <h3>第一列</h3> <p>菜鳥教程</p> <p>學的不僅是技術,更是夢想!!!</p> </div> <div class="col-sm-4"> <h3>第二列</h3> <p>菜鳥教程</p> <p>學的不僅是技術,更是夢想!!!</p> </div> <div class="col-sm-4"> <h3>第三列</h3> <p>菜鳥教程</p> <p>學的不僅是技術,更是夢想!!!</p> </div> </div> </div>

嚐試一下 »

Bootstrap5 與 Bootstrap 3 & 4

Bootstrap5 是 Bootstrap 的最新版本,使用了新組件、更快的樣式表以及擁有更快的響應能力。

Bootstrap5 支持所有主要的最新穩定版本瀏覽器,但不支持 Internet Explorer 11 及以下版本。

Bootstrap5 和 Bootstrap 3 & 4 的主要區別在於 Bootstrap5 不再依賴 jQuery,使用了原生的 JavaScript,當然我們如果要想用也可以引入 jQuery

Bootstrap5 IE11 以下版本的瀏覽器,Bootstrap4 放棄了對 IE8 以及 iOS 6 的支持。如果需要對舊版本瀏覽器兼容,那麼請使用 Bootstrap3

注意:目前官方團隊仍然在維護 Bootstrap 3 和 Bootstrap 4 ,我們可以繼續使用它們, 但是,不會向 Bootstrap 3 & 4 添加新功能。