Bootstrap教學－Bootstrap4.0新版GridSystem網格系統大革新！搶先用

　　用過許多套的RWD的Framework，還是最愛Bootstrap除了內建了許多特效外，再來就是它的Gridsystem網格系統，不但架構清楚好上手，同時還能加快RWD版型的設計，而Bootstrap4.0雖然目前還是alpha，但在Gridsystem有重大的改變，將原來的浮動靠齊改為flexbox，讓版型分割變得更靈活。

　　同時還打破了原來的12等份的限制，甚至還可以混用，但這也是正式的與IE9.0說掰掰，雖然目前的Bootstrap4.0還不是正式版，但可以先一起來看一下，而梅干現在就簡單的來為大家介紹一下，此次Bootstrap4.0版，在Gridsystem網格系統的重大革新吧！

---

Bootstrap4.0

---

可看到此次的4.0版，在尺寸的設定上，多了一組xl，同時在container的寬度也作了調整，從原來是1170px，也改為1140px。

---

而在網格的設定上，有別於以往，只要在row中，直接加入col後，就會自動將row的div等分，比方要作三等份，以前需寫col-md-4，但現在只要col重覆三次，無需再特別註明裝罝與數量，是不是方便許多呀！

---

更酷的是，還可以混用，將col後再加數量。

---

當要使用Bootstrap4.0的話，一樣從官網中，就可將它下載回來。

---

下載回來後，比較特別的是Bootstrap4.0將網格系統是獨立出來的，因此當只需使用它的網格系統時，那就只需載入boostrap-grid.css就可以了。

---

而這邊梅干就先只載入bootstrap4.0的grid，接著在row的div內，加入了五個col的div。

---

這時畫面就會分割成5等份，是不是超方便的呀！

---

甚至還可在col後方加入裝置前綴詞，因此尺寸為行動裝置尺寸時，就會變行塊狀式的堆疊啦！

---

除了加裝置外，還可以加入數量，這樣就會變成，3的版位是8/12=2/3，而1、2、4、5則是將剩下的1/3進行等分。

---

完成後，這時就可看到3佔了2/3，剩下的則是將剩下的1/3等分，是不是明顯的感受到Bootstrap4.0網格系統的方便與靈活性呀！