Day 14 - 切版排版技巧(二) : Width、格線系統(Bs)

每日一談

嗨，大家好 ! 我是阿蘇
今天是Day14， 今天繼續談切版排版技巧，除了flex 熟練運用外，我們可以熟練切出想要的版型，還有一個是運用bs格線系統來排版，這個算是比較進階技巧，對 css 熟練運用後在來學習，搭配 bootstrap 使用。

運用寬度靈活排版

可以看到常見排版有 單欄、二欄、三欄、四欄，那我們就可以運用寬度，寫出想要的排版

• 先用flex 讓他並排
• 設定區塊寬度完成排版
• 運用 padding、margin 推出區塊空隙

範例一 - 可以看到，我們一般網頁會寫在container 裡面，這邊是設定1440px，那我想要寫兩欄式，我可以寫flex讓他們並排，並寫 width 50%， 這時候因為沒有超過 1440px 所以它會自動變兩欄，運用這個方式排出我們想要的版型

範例二 - 考慮到 區塊寬度、margin並變化width ，間距可以用padding 去推，如果用 margin 去推，因為本身設定60%+40% 已達到 100% ，這時如果在加 margin 就會超過，就會掉下去，所以了解原理靈活變化排版才會很輕鬆

bootstrap - 格線系統

甚麼是格線系統? 你可以想像是網站的基本布局，在很多設計稿上會看到，設計師會依照這個規劃去設計精稿，讓網站有規律的布局及基本架構。

我們可以看到在container 裡面，我們使用格線系統，他會分1~12欄，跟寬度運用很像，只是格線系統更為方便靈活，理解概念使用上就會很方便

格線寫法

格線重點

• 外層一定要加 row (用來修正col)
• 用col欄位去做搭配