1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. [教學] Bootstrap5 全新的Grid網格系統搶先看!讓版面編排更靈活
網頁開發 網頁設計

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

2020/06/22

梅問題-[教學] 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真的掰掰了。
梅問題-[教學] Bootstrap5 全新的Grid網格系統,讓版面編排更靈活
Step2
接著來看一下Container的部分,在Bootstrap5.0多了6組可作設定,讓指定寬度不再只限於一種,同時在5.0的部分,裝置從原來的lg再多了xl與xxl二個尺寸。
梅問題-[教學] Bootstrap5 全新的Grid網格系統,讓版面編排更靈活
Step3
接著再12欄的部分,分別多了xl與xxl,這也符合目前裝置的解析愈來愈大的趨勢。
梅問題-[教學] Bootstrap5 全新的Grid網格系統,讓版面編排更靈活
Step4
接著在間距的部分,梅干個人感覺有種解脫的fu,以前為了這個間距,都得一一作設定,現在終於不用了,在container,加入px-,就是指二邊的padding要多大,目前可設定的範圍從px-0~px-5。
梅問題-[教學] Bootstrap5 全新的Grid網格系統,讓版面編排更靈活
Step5
另外在區塊與區塊間,分別有gy-
(水平)與gx-(垂直)可設定,一樣分別有0~5可作設定。
梅問題-[教學] Bootstrap5 全新的Grid網格系統,讓版面編排更靈活
Step6
如果水平、垂直要一致的話,直接用g-
就可以了。
梅問題-[教學] Bootstrap5 全新的Grid網格系統,讓版面編排更靈活
Step7
除了可設外距外,內距也可作設定,內距則是用p-*,一樣也是五級。
梅問題-[教學] Bootstrap5 全新的Grid網格系統,讓版面編排更靈活
Step8
另外還有一個最重要的東西,那就是謀些區塊在裝置中顯示或隱藏,在Bootstrap3.0各位對於hidden-xs與visible-xs不感陌生,但自從Bootstrap4.0後,就已改成這樣了,所以在隱藏的部分,與4.0是相同的,整個網格系統,就與大家分享到這些囉!若各位有要補充的,也歡迎留言分享。
梅問題-[教學] Bootstrap5 全新的Grid網格系統,讓版面編排更靈活