卡斯伯提供的教學資源:


css

鐵人賽 24 - 實戰心法 - 自幹 Grid System

自己本身是不常自幹 Grid,但透過自幹會了解更細的運作原理,grid system 和其他元件不太一樣,他是屬於外容器型的元件,一層包覆著一層變化性相當高,如果不熟悉的情況下會容易造成跑版。...

css

鐵人賽 23 - 實戰心法 - 常見的垂直置中手法

上一章節介紹了各種 Utilities ,唯獨垂直置中不介紹,因為在製作、使用垂直置中時要先思考 “支援的瀏覽器”,就算現在全部 IE 的使用率低於 2% 的情況下,還是會有很多小兄弟會希望網站優先支援 IE。 本篇會介紹幾種垂直置中手法(不包含舊瀏覽器),每一種手法的寫法都不大一樣,所以使用時要特...

css

鐵人賽 22 - 實戰心法 - 經常使用,但卻容易被忽視的 CSS

Bootstrap 3 載入以後其實就有包含大部分的元件,原本的設計概念上是希望透過一套框架就能滿足大多的需求,但實際在專案運作時有許多客製化需要微調,而很多微調的項目如下: 左邊一點、右邊一點、間格大一點 文字色彩 背景色 對齊方法 垂直置中方法 CSS 屬性:顯示屬性、背景屬性、Positio...

css

鐵人賽 21 - Bootstrap 透過 Sass 新增自定義元件

許多人在使用 Bootstrap 時,如果有需要新增、調整,都是寫在 CSS 的後方或是另開一個新檔透過 “覆蓋” 的特性來新增、調整。先前的文章已經介紹了如何調整 Bootstrap 的 CSS,透過變數的方式,我們可以調整整體的樣式設定,而 “新增” 我們也應該用相同的方法來製作,這樣的方法更有...

css

鐵人賽 20 - Sass 資料夾結構

對於 Bootstrap 有一定了解後,我們即將要開始新增元件,不過在新增前我在分享一下 Sass 開發時的資料結構。 Sass 資料夾結構相信大家也聽說 SMACSS 等,不過我們我們已經加入了 Bootstrap ,在開發時也要思考如何結合不同的開發概念 (自己的元件與 Bootstrap 元件...

css

鐵人賽 19 - Bootstrap 一次看懂元件的使用組合

Bootstrap 的官方文件有完整的說明以及範例,就算是如此,還是會有許多朋友希望有快速入門的介紹,本篇就來介紹絕大部分 Bootstrap 元件的組合手法,搞懂一次後就能快速運用到其他模組上,甚至 Bootstrap 4 也是用相同的概念就能夠運用唷。...

css

鐵人賽 18 - Bootstrap 元件分類概觀 (content, container)

接下來我們依循著 OOCSS 與 Bootstrap 的設計模式繼續擴資、修改元件,不過在繼續下一個階段以前,我們先來了解一下 Bootstrap 的設計模式。...

css

鐵人賽 17 - Bootstrap 自定義樣式超簡單

在導入框架至網站時,還要考慮框架是否符合網站風格以及往後的維護性。Bootstrap 雖然設計上是要給開發者直接運用的,但實際上他所設計的彈性非常之高,也很適合做客製化,甚至 fork 作為公司團體的 Style Guide。...

css

鐵人賽 16 - 將 Bootstrap 導入自動化流程

先前的流程我們將 Gulp 的基礎流程已經建立起來了,現在我們要將 Bootstrap 導入自動化流程,讓接下來的客製化更為容易。...

css

鐵人賽 15 - 為什麼 Boostrap

Bootstrap 是目前主流的 CSS 框架,先前也有提到,在起初我是很不喜歡 Bootstrap 的框架,認為他搶走我大部分的工作且缺乏特色,但在研究後會發現他並非我想的那麼缺乏特色,完全看開發者的使用及熟練度。 我們也可以看到網路上有相當多的 HTML Template 都做的非常美,但其實底...

撰寫一篇文章需要花上非常多的時間,如果你關閉 Adblock (廣告阻擋器),我會非常的開心 🤗。 (╭(°A°`)╮))
撰寫一篇文章需要花上非常多的時間,如果你關閉 Adblock (廣告阻擋器),我會非常的開心 🤗。 (╭(°A°`)╮))