{ PH_Dev }

Published on

連續記錄挑戰Day31-初探Boostrap4

Authors
  • avatar
    Name
    Penghua Chen(PH)
    Twitter

初探Boostrap4

關於學習Boostrap4的過程中，我覺得最重要的是要了解：

  • 什麼是Boostrap4？
  • 為什麼要套用Boostrap4?是因為什麼目的？
  • Boostrap4是基於什麼觀念被開發出來？
  • Boostrap4在版面配置上有著什麼特別的設定？
  • Boostrap4元件的HTML架構、CSS是如何被撰寫？
  • 當需要額外的客製化css設定時，應該怎麼做比較好？
  • Boostrap4的class命名有什麼規則？
  • Boostrap4預設了哪些響應式斷點？
  • Boostrap4在字體部分變更了什麼？

框架可以幫助我們更快的生成一些常用的元件及版型，例如導覽列(Navbar)等。

但要提醒的一點是，如果不了解HTML/CSS的話，當遇到需要修改時可能會束手無策，所以不能完全依賴框架，也要具備HTML/CSS的相關基本知識才行。

但要如何改動框架中的設定，我覺得必須從官方提供的 Source Code著手。

因為無論是元件或者版型等等的設定都可以透過Source Code了解其來龍去脈，所以閱讀官方程式碼是需要的！

什麼是Boostrap4？

  • 使用框架提供的元件及已經設定好的 class，就可以快速架構出一個網站的雛形。
  • 是一套行動優先的框架，且已經預設五個尺寸的響應式斷點

為什麼要套用Boostrap4?是因為什麼目的？

對於一個前端工程師來說，什麼時候該用Boostrap4，什麼時候需要自己手刻，我覺得這是一個需要好好思考的問題，因為這牽扯到關於自己在撰寫程式碼時的考量。

一個對於我來說很重要的參考依據，在於需求是不是有許多客製化的部分。如果需求是資料層面的功能要完整，而視覺方面沒有過多要求也可能沒有設計稿的狀況下，那套用Boostrap4也許是一個很好的選擇。

然而如果是有設計稿，且客製化需求也很多時，則會採用元件使用Boostrap4的，而其餘部分則是透過scss等手刻完成需求。

小結論：需求決定一切。

Boostrap4是用基於什麼觀念被開發出來？

需要修改框架的一些設定時，必須要先了解關於Boostrap4運用了什麼觀念開發，才有辦法正確的修改。

  • Boostrap4是flex為核心觀念所開發的框架
  • grid網格觀念

跟Boostrap3的差別很大，所以如果不知道Boostrap4是透過flex的概念開發的話，在修改上勢必會有些困難;而grid網格觀念則是在版面設定上提供了一個規則，只要了解了在修改上就不會太難。

Boostrap4在版面配置上有著什麼特別的設定？

Bootstrap4運用了網格概念，其中

  • .row 左右兩邊設定了以下設定
    • margin-left:-15px
    • margin-right:-15px

在 .row 上使用負值margin方法確保你的內容在左側之下正確對齊。 參考資料

  • .col 左右兩邊設定了以下設定
    • padding-left: 15px
    • padding-right: 15px

欄包含水平的 padding，以產生單個欄之間的溝槽(gutter) 參考資料

  • Bootstrap4 Grid System Bootstrap4 grid system

  • 透過col排版時的配置 col排版呈現

Boostrap4元件的HTML架構、CSS是如何被撰寫？

透過底下這兩個連結，可以看出一個元件的架構以及css的撰寫思維，降低修改所需要的時間。 Bootstrap4 元件連結 Bootstrap4 Source Code

當需要額外的客製化css設定時，應該怎麼做比較好？

難免會有遇到需要客製化的時候，此時的class命名就會是一件很頭痛的事情，因為框架已經用掉了許多命名方式。

這裡提供我的一些目前的想法:

  • 在客製化的class加入自訂的字樣，Ex: my-carousel 、 my-navbar，如果是需要透過js控制的部分可以撰寫成 js-carousel等
  • 將客製化的class放在所有class的最前方，在維護上可以加快得知該部分是否有客製化的設定。

Boostrap4的class命名有什麼規則？

  • 元件使用的標籤
    • ex: navbar
  • 樣式設定的標籤
    • ex: mx-auto
    • ex: bg-light

Boostrap4預設了哪些響應式斷點？

  • xs <= 575.98px
  • sm : 576px ~ 767.98px
  • md : 768px ~ 991.98px
  • lg : 992px ~1199.98px
  • xl >= 1200px

Boostrap4在字體部分變更了什麼？

BS4放棄使用預設字體，採用隨系統預設字體而呈現字型的方式

  • mac/ios : apple-system -> Ping Fang
  • windows : 無預設;
    • 英：Segoe UI ／ 中：Ｍicrosoft Jhenghei
  • android : 無預設;
    • 英：Roboto ／ 中：droidsansfallback

目前對於這套框架的理解大概如此，待實務經驗更加豐富且有新的理解時會在不斷更新！