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