天天看點

Bootstrap5 教程

Bootstrap5 教程

Bootstrap 是全球最受歡迎的前端元件庫,用于開發響應式布局、移動裝置優先的 WEB 項目。

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

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

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

HTML 教程

CSS 教程

JavaScript 教程

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

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

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

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

以下是一個簡單的 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>

<h3>第二列</h3>

<h3>第三列</h3>

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 添加新功能。