網頁設計, 網頁資源

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

梅干 2017/03/14
梅問題-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。
梅問題-Bootstrap教學-Bootstrap4.0新版GridSystem大革新!搶先用
而在網格的設定上,有別於以往,只要在row中,直接加入col後,就會自動將row的div等分,比方要作三等份,以前需寫col-md-4,但現在只要col重覆三次,無需再特別註明裝罝與數量,是不是方便許多呀!
梅問題-Bootstrap教學-Bootstrap4.0新版GridSystem大革新!搶先用
更酷的是,還可以混用,將col後再加數量。
梅問題-Bootstrap教學-Bootstrap4.0新版GridSystem大革新!搶先用
當要使用Bootstrap4.0的話,一樣從官網中,就可將它下載回來。
梅問題-Bootstrap教學-Bootstrap4.0新版GridSystem大革新!搶先用
下載回來後,比較特別的是Bootstrap4.0將網格系統是獨立出來的,因此當只需使用它的網格系統時,那就只需載入boostrap-grid.css就可以了。
梅問題-Bootstrap教學-Bootstrap4.0新版GridSystem大革新!搶先用
而這邊梅干就先只載入bootstrap4.0的grid,接著在row的div內,加入了五個col的div。
梅問題-Bootstrap教學-Bootstrap4.0新版GridSystem大革新!搶先用
這時畫面就會分割成5等份,是不是超方便的呀!
梅問題-Bootstrap教學-Bootstrap4.0新版GridSystem大革新!搶先用
甚至還可在col後方加入裝置前綴詞,因此尺寸為行動裝置尺寸時,就會變行塊狀式的堆疊啦!
梅問題-Bootstrap教學-Bootstrap4.0新版GridSystem大革新!搶先用
除了加裝置外,還可以加入數量,這樣就會變成,3的版位是8/12=2/3,而1、2、4、5則是將剩下的1/3進行等分。
梅問題-Bootstrap教學-Bootstrap4.0新版GridSystem大革新!搶先用
完成後,這時就可看到3佔了2/3,剩下的則是將剩下的1/3等分,是不是明顯的感受到Bootstrap4.0網格系統的方便與靈活性呀!
梅問題-Bootstrap教學-Bootstrap4.0新版GridSystem大革新!搶先用