[教學] Bootstrap5 全新的Grid網格系統搶先看！讓版面編排更靈活

　　對於許多從事網頁設計的朋友而言，Bootatrap是一套既簡單又易用的RWD框架，雖然Bootstrap除了擁有RWD的版面編排功能外，內建也有許多的互動效果，像是圖像輪播、頁籤選單、下拉選單、導覽列、滾動切換….等，且完全無需寫任何的程式，只要依照格式套用到自己的專案中，立即就有此效果，但Bootstrap讓梅干一直愛不釋手的，不是它內建的Javascript特效，而是它的網格系統。

  自從Bootstrap3.0開始，就將版面分割成12等分，即便到Bootstrap5.0版也是如此，而一直有傳言Bootstrap5將會拔掉jQuery，就目前alpha的版本來看卻實是，但這次的改版梅干關心的是它的Grid系統，雖然一樣保留了12欄，但也多了許多的設定，像是區塊間的間距，以及container也多了許螱模式可設定，不再只有固定與百分比二種，因此有在使用Bootstrap的朋友，也一塊來看看Bootstrap5.0新版的網格系統，到底作了那些的更新。

---

Bootstrap5.0

---

Step1
首先，進到Bootstrap5.0 alpha的頁面中，可看到目前5.0只需載入自家的CSS與JS檔，jQuery真的掰掰了。

---

Step2
接著來看一下Container的部分，在Bootstrap5.0多了6組可作設定，讓指定寬度不再只限於一種，同時在5.0的部分，裝置從原來的lg再多了xl與xxl二個尺寸。

---

Step3
接著再12欄的部分，分別多了xl與xxl，這也符合目前裝置的解析愈來愈大的趨勢。

---

Step4
接著在間距的部分，梅干個人感覺有種解脫的fu，以前為了這個間距，都得一一作設定，現在終於不用了，在container，加入px-，就是指二邊的padding要多大，目前可設定的範圍從px-0~px-5。

---

Step5
另外在區塊與區塊間，分別有gy-(水平)與gx-(垂直)可設定，一樣分別有0~5可作設定。

---

Step6
如果水平、垂直要一致的話，直接用g-就可以了。

---

Step7
除了可設外距外，內距也可作設定，內距則是用p-*，一樣也是五級。

---

Step8
另外還有一個最重要的東西，那就是謀些區塊在裝置中顯示或隱藏，在Bootstrap3.0各位對於hidden-xs與visible-xs不感陌生，但自從Bootstrap4.0後，就已改成這樣了，所以在隱藏的部分，與4.0是相同的，整個網格系統，就與大家分享到這些囉！若各位有要補充的，也歡迎留言分享。