iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
自我挑戰組

前端超實用框架: Bootstrap 入門到實戰教學 系列

本系列教學文將深入探索 Bootstrap 5 框架的強大功能和靈活性,我們會從基礎開始到探討如何建立一個優秀的響應式網站。
系列的基礎部分將介紹 Bootstrap 的核心組件,如網格系統、utility、helper、導航欄和按鈕。說明他們的原理與如何做修改,使它們能無縫融入自己的專案中。
再來,我們將深入研究更高級的組件,如卡片、輪播、表單,以及彈出式對話框,為讀者構建更豐富的用戶界面。
最後,我們會將所學的知識點實作,去開發一個屬於自己的網站,讓讀者去整合、了解bootstrap 框架如何實踐在真正的項目上,並愛上bootstrap。

鐵人鍊成 | 共 31 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文
DAY 1

Bootstrap入門指南:開始使用簡單強大的前端框架

如果你是一位從事前端開發的人,那麼 Bootstrap 將成為你的得力助手。它是世界上最受歡迎的框架,用於建立響應式、行動優先的網站。為網站和應用程式的設計和開...

2023-09-16 ‧ 由 阿沁 分享
DAY 2

CSS Reset 必備知識與Bootstrap CSS Reset

CSS Reset知識 何謂 CSS Reset CSS Reset(CSS重置),是網頁設計中一個重要的概念,用來清除不同瀏覽器(EX:Chrome、Fire...

2023-09-17 ‧ 由 阿沁 分享
DAY 3

Bootstrap Typography,強大的排版工具

Bootstrap提供了強大的排版(Typography)工具,讓我們可以輕鬆地設計出優雅的文字內容。在這篇文章中,我會介紹如何使用 Bootstrap 來幫助...

2023-09-18 ‧ 由 阿沁 分享
DAY 4

Bootstrap 圖片、圖片區與表格

今天我們來認識Bootstrap content(內容) 的圖片、圖片區與表格。本教學是幫助朋朋快速理解Bootstrap 官方文件,所以建議搭配官方文件服用。...

2023-09-19 ‧ 由 阿沁 分享
DAY 5

Bootstrap 設計原則與CSS變數

Bootstrap 設計原則 Bootstrap的設計原則是採用架構與樣式分離原則,架構就像是房屋的結構,有方體、長條、圓柱等架構;而樣式就像是房屋的裝潢樣式,...

2023-09-20 ‧ 由 阿沁 分享
DAY 6

Bootstrap格線系統之【響應式中斷點】

Bootstrap中很重要的功能就是響應式格線系統,我們可以使用格線系統來創建多種佈局,無論是簡單的兩列還是複雜的多列佈局都可以輕鬆用少少的class就完成,此...

2023-09-21 ‧ 由 阿沁 分享
DAY 7

Bootstrap 格線系統之排版三劍客

上一篇文章有提到Bootstrap格線系統的排版三劍客: container(容器)、row(橫列)、column(直行),今天就來介紹它們。 一、Contai...

2023-09-22 ‧ 由 阿沁 分享
DAY 8

Bootstrap格線系統用法教學 | Column之運用

繼上篇說明了Bootstrap排版三劍客:container(容器), row(橫列), column(直欄)之後,今天這篇我們來學格線系統Column的用法。...

2023-09-23 ‧ 由 阿沁 分享
DAY 9

Bootstrap格線系統用法教學 | Row-Cols與gutter

上一篇我們學了如何在column上設定寬度與排版,事實上我們也可以用.row-cols-* 的類別快速設置想要內容與排版的列數。 Row-Cols 基本用法 寫...

2023-09-24 ‧ 由 阿沁 分享
DAY 10

Bootstrap 格線系統與Flex Box之運用(一)

flex不管在排版上還是對齊上都可以快速方便地實踐,而且bootstrap像是格線系統或是很多元件都有使用到flex,這一篇我們就來學bootstrap 的Fl...

2023-09-25 ‧ 由 阿沁 分享