1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. [教學] Bootstrap4.x 網格與隱藏元素總整理,讓你無痛從Bootstrap3升級到Bootstrap4.x
網頁開發 網頁設計

[教學] Bootstrap4.x 網格與隱藏元素總整理,讓你無痛從Bootstrap3升級到Bootstrap4.x

2019/12/11

梅問題-[教學] Bootstrap4 網格與隱藏元素總整理,讓你無痛從Bootstrap3升級到Bootstrap4
  Bootstrap至今還是相當受歡迎的RWD套件,除了簡易好上手外,再來就是內建了許多網頁的常用特效,以及網路資源也相當豐富,而Bootstrap4正式版,已經推出許久,但還是有不少朋友,習慣使用Bootstrap3,雖然Bootstrap3相當好用,但因為3.0是採用CSS2的浮動貼齊方式,因此當遇到區塊長短腳時,就會產生區塊堆疊異常,而造成版面跑版的狀況發生。

  為了解決這問題,Bootstrap4.x後,則是採用CSS3的flex的屬性,來解決堆疊跑版的問題,同時4.x也將網格前綴詞作了調整,甚至就連大家最常使用的隱藏元素也改變了,因此要如何快速的上手Bootstrap4.x的網格系統與隱藏元素,梅干就幫大家整理一下,讓各位可以無痛且快速的進入Bootrap4.x。


Bootstrap4.x (container容器)首先,先來看一下container容器的部分,到了4.x後除了先前的container與container-fluid,現在還多了container-裝置,如此一下來就可控制最外層div容器的顯示寬度。
梅問題-[教學] Bootstrap4 網格與隱藏元素總整理,讓你無痛從Bootstrap3升級到Bootstrap4
Bootstrap4.x (網格系統)至於Bootstrap4.x,原來的前綴詞到了xs作了調整,只需直接寫col即可,甚至container的區塊大小,也作了修正,原來的xl為1170,4.x變成了1140,因此在設計版型時,得特別注意到。
梅問題-[教學] Bootstrap4 網格與隱藏元素總整理,讓你無痛從Bootstrap3升級到Bootstrap4
Bootstrap4.x (hidden/visible隱藏/顯示元素)最後隱藏元素,也是在Bootstrap3最常使用的,而到了Bootstrap4.x後,在官方的說明文件中,似乎找不到這張表,而此表是由熱心的網友「POY CHANG」所設計的,透過這張表,就可快速的了解,隱藏與顯示元素,該如何來作設定,而透過這三張表格,就能快速且無痛的使用Bootstrap4.x囉!
梅問題-[教學] Bootstrap4 網格與隱藏元素總整理,讓你無痛從Bootstrap3升級到Bootstrap4