Bootstrap 5 課程 - 完整逐步指南 (2024)

使用最新的 Bootstrap 5 CSS 框架建立 3 個真實的專案。完成 Bootstrap 5 的深度培訓

從這 21.5 小時的課程，你會學到

您將學習最新的 Bootstrap v5.2 框架
建置Bootstrap 5 EMS前端應用程式（專案）
建立 Bootstrap 5 部落格應用程式（專案）
建置 Bootstrap 5 教育網站（專案）
在任何網站中完成引導程式實施
您將學習響應式網站設計
您將學習建立客製化的 Bootstrap 5 Web 應用程式
您將學習 Bootstrap 5 中的不同斷點
您將學習如何使用 Bootstrap 5 容器
你將 Bootstrap 5 Grid系統
您將學習創建響應式圖像、表格和版式
您將學習建立客製化的 Bootstrap 5 表單
您將學習所有 Bootstrap 5 元件，例如 Badge (徽章)、 Breadcrumb (麵包屑)、Buttons (按鈕)、Button group (按鈕群)、Card (卡片) 等等
您將學習建立一個完整的基於 Bootstrap 5 的網站

要求

您需要了解 HTML5 和 CSS3 的基礎知識

課程說明

（2023 年 6 月 – 更新）將 Bootstrap 部分更新為 Bootstrap 5.3

課程現已更新為最新版本的 Bootstrap 5.3，具有深色模式、新的進度元素等。

（更新至Bootstrap 5.2）

Bootstrap 是一個流行的框架，專為建立和開發響應式 Web 應用程式而設計。藉助 Bootstrap 5，該框架擁有更多 UI 元素並配備了更高級的功能。超過一百萬個網站使用 Bootstrap 及其框架進行前端開發。

在本課程中，您將從頭開始學習 Bootstrap 5，直到達到高級水平。您將學習使用最新的 Bootstrap 5 CSS 框架( framework )來建立 3 個真實世界專案。我們將逐步瀏覽 Bootstrap 5 文件( documentation )並學習如何使用 UI 元素。

現在，在開始之前，您需要具備本課程的一些先決條件。儘管這個 Bootstrap 5 課程涵蓋了從頭開始的所有內容。您需要一些技能才能開始。

您需要具備一些 HTML5 和 CSS3 技能，並且應該能夠使用 HTML 和 CSS 建立一些網站。如果沒有，也沒關係，但您仍然需要了解一些 HTML 和 CSS 基礎知識。

您應該了解 Classes 和 IDs 在 CSS 中的工作原理，因為 Classes 和 IDs 用於使用 Bootstrap 5 建立網站。確保對 CSS Classes 和 IDs 的含義有一些基本了解。

您還需要具備一些 JavaScript 技能，儘管本課程並不要求太多。擁有一些 JavaScript 技能仍然是個好主意。因為 Bootstrap 5 在其主要核心中使用 JavaScript 來處理 Web 互動，例如下拉式選單、模式和其他 UI 元素。

因此，這就是您在整個課程中將學到的內容。

在第 1 節中，您將了解 Bootstrap 5 框架是什麼，並且您將了解 Bootstrap 5 Basic 網頁的基本結構。

在第 2 節中，您將了解 Bootstrap 5 網格系統中的斷點以及可用容器的類型，也將了解如何在多個裝置上使用 Bootstrap 5 網格。包括網格內的操作方法列。您將學習如何垂直和水平對齊列、換行、偏移以及重新排序。您將了解邊距實用程式、裝訂線以及水平裝訂線和垂直裝訂線。

在第 3 節中，您將了解 Bootstrap 5 的主要內容，其中您將了解 Bootstrap 5的 Typography。您將學習如何在 Bootstrap 5 中使用圖像，如何在 Bootstrap 5 中建立和使用表格，您還將學習如何在 Bootstrap 5 中建立和使用圖形。

在第 4 節中，您將學習如何在 Bootstrap 5 中使用表單和表單元素。首先，您將學習如何使用 Bootstrap 5 卡和表單控制項建立基本登入表單。您將學習使用暗示自訂和內建 CSS 的方法。此外，您還將學習在 Bootstrap 5 頁面中設定表單佈局並設定其樣式。

在第 5 節中，您將了解 Bootstrap 5 中的元件。您將了解如何使用Bootstrap 5 的可忽略警報、建立 Badge、在Bootstrap 5 中使用 Breadcrumb、在 Bootstrap 5 中建立和對齊按鈕和按鈕群組等等。

在第 6 節中，您將了解 Bootstrap 5 中的幫助程式。您將了解 clearfix、顏色和背景、彩色連結、比率、位置、堆疊、視覺隱藏元素、拉伸連結、截斷文字和垂直線。

在第 7 節中，您將了解 Bootstrap 5 中的實用程式。這部分包括有關 Bootstrap 5.2 中所有可用實用程式的每個次要和主要細節

接下來，您將學習創建和自訂 Bootstrap 5 卡、創建輪播、製作可折疊面板以及添加資料以使其看起來更加原始和即時。

然後您將了解下拉式選單和清單群組，您將學習建立彈出模式以及在 Bootstrap 5 中建立和管理簡單且複雜的導覽系統。

一旦我們了解了導航系統，您將學習如何建立分頁和彈出視窗。接下來，您將學習如何使用進度條和滾動間諜。

使用 Bootstrap 5 建立員工管理系統

在此專案中，您將學習如何使用 Bootstrap 5 建立完整的員工管理系統或 EMS Web 應用程式。該專案將是 EMS 應用程式的前端，其中包括登入頁面、儀表板、表單頁面建立員工資料，以及另一個表單頁面來管理或更新員工資料，所有這些都在 Bootstrap 5 中進行。

使用Bootstrap 5 建立部落格應用系統

部落格是網路上最常見的事物之一。在此專案中，我們將使用 Bootstrap 5 建立一個完整的部落格應用程式。我們的部落格應用程式將具有用於顯示英雄圖像的橫幅部分、用於顯示類別資訊的卡片、用於顯示有關部落格的其他資訊的頁腳部分以及貼文和內容。頁面顯示各種文章。我們也將使用 Bootstrap 5 表單元素建立一個評論系統。

使用 Bootstrap 5 的真實教育網站專案

當我們透過建立不同類型的專案來獲得 Bootstrap 5 的一些高級知識時，我們將繼續建立一個將在網路上運行的教育網站。

使用 Bootstrap 5 建立不同類型的專案的想法是練習開發 Web 應用程式並培養 Web 開發技能，以掌握使用 Bootstrap 5 進行 Web 的前端開發。

我希望你們會喜歡這門課程，我們課堂見。