技術 網頁設計常用格線系統(下)

上一篇介紹了格線系統的概念及計算方式，擁有了這些觀念後會如何運用在繪圖軟體上呢？無論你是使用 Sketch 或是 Adobe XD 都可以快速建立如前文所提到的...

技術 第 8 集：Gird System 格線系統

此篇會簡單介紹格線系統原理以及使用技巧。 Bootstrap5 格線系統是基於 flex，想活用格線系統可以先多加了解 flexbox 盒模型，剛好上一集有稍微...

技術 Day 10：Flex Box 我看到了，但你有格線嗎？【Tailwind – 格線系統篇】

格線系統終於來了，起初在學習 tailwind 的時候還不曉得有格線系統，在 bootstrap 5(bs5) 用過格線系統後就來找找 tailwind 的格線...

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

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

技術 格線系統(2) DAY44

今天要先來介紹 Sass @each 與 map Sass map-get 這裡要先宣告變數(有點類似js宣告物件) $themes:( //key...

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

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

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

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