iT邦幫忙

鐵人檔案

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

30 天轉生到 bootstrap 5 的意識界 系列

想學寫網站但 不熟 css ? 不熟 js?
那有什麼問題,你知道其實 bootstrap 開發者一開始也不會 js 嗎?

玩轉 bootstrap 5,從環境載入一直到最後的客製化 bootstrap 5 以及結合其它插件,使網站變的更炫炮,
大家可能會好奇為什麼是「意識界」,是不是打錯字了?
其實來源是剛參加完六角學院的切版直播班,我想將我連作夢都夢到切版的這個過程記錄下來,所以取名是「意識界」,希望大家會喜歡這部「30 天轉生到 bootstrap 5 的意識界」的異世界番

鐵人鍊成 | 共 30 篇文章 | 30 人訂閱 訂閱系列文 RSS系列文
DAY 21

第 21 集:Bootstrap 客製化 utilities(上)

此篇會教學如何將 Bootstrap 通用類別 utilities 自幹一個出來。 事前準備: 原始碼架構 編譯 sass 環境 sass 基礎...

2021-10-06 ‧ 由 Kent 分享
DAY 22

第 22 集:Bootstrap 客製化 utilities(下)

此篇延續 Bootstrap 客製化 Sass utilities(上)最後尚未介紹的 generate-utility,解析 generate-utilit...

2021-10-07 ‧ 由 Kent 分享
DAY 23

第 23 集:Bootstrap 客製化 Grid 格線系統

此篇會教學如何將 Bootstrap grid 格線系統,自幹一個出來。 事前準備 Gird System 格線系統基礎觀念 RWD 響應式基礎觀念...

2021-10-08 ‧ 由 Kent 分享
DAY 24

第 24 集:Bootstrap 客製化 Container 容器

此篇會教學如何將 Bootstrap container 容器,自幹一個出來。 若是使用 Wrapper 的朋友,可以參考:淺談 Container Wra...

2021-10-09 ‧ 由 Kent 分享
DAY 25

第 25 集:Bootstrap 客製化 RFS 響應式文字

此篇會介紹 Bootstrap 中的 rfs,是如何做到依據視窗大小,來計算適合的元素尺寸。 淺談 rfs Responsive Font Sizes 簡...

2021-10-10 ‧ 由 Kent 分享
DAY 26

第 26 集:Bootstrap 客製化 root 變數

此篇會解析 Bootstrap root 是如何自定義生成自己的 CSS 樣式。 原始碼 使用到兩隻檔案: _root.scss:主要生成變數樣式入口。...

2021-10-11 ‧ 由 Kent 分享
DAY 27

第 27 集:Bootstrap 客製化 reboot 重置

此篇會介紹 Bootstrap 使用的 css reset 檔案 _reboot.scss。 事前準備 css reset 基礎概念 還不懂 css...

2021-10-12 ‧ 由 Kent 分享
DAY 28

第 28 集:Bootstrap 客製化 component 元件樣式

此篇會介紹如何修改 Bootstrap 元件樣式。 事前準備 須先了解變數設置、通用類別設置,再繼續閱讀會更好消化呦。 _variable.scss...

2021-10-13 ‧ 由 Kent 分享
DAY 29

第 29 集:Bootstrap 客製化 component 元件樣式

此篇延續上一篇元件樣式修改,此篇著重在元件的動態效果樣式。 option 參數 撰寫動態效果起手式。 $enable-reduced-motion:...

2021-10-14 ‧ 由 Kent 分享
DAY 30

第 30 集:Bootstrap 客製化秘技

用 meme 圖講述這一趟 30 天轉生到 Bootstrap 5 的意識界 的心境。

2021-10-15 ‧ 由 Kent 分享