Bootstrap 4 學習筆記

這次介紹主要著重在官方文件上的 Layout 、Utilities,整理出改版後不同處及自己的看法提供參考。

 

首先在載入 Bootstrap.js 前,除了原本的 jquery 外,還多了一個 popper.js,jquery 版本需求也從 1.9.0 提升到 3.2.1

popper.js 介紹

 

重構 viewport breakpoints 、 class 命名小變動,官方文件寫的很清楚

 

col 自動填滿剩餘空間
col-{breakpoints}-auto 維持原寬度 (依內容決定)

 

 

透過 spacing class 設定元件 margin、padding,能夠搭配不同斷點使用
(個人覺得還蠻方便的 XD)

 

 

利用 Flex 特性重新定義 offsetting columns 方式

Order :設定 col 排序,一樣能夠搭配 breakpoints 調整

 

Display:淺顯易懂的規則外,還可以搭配斷點使用, RWD 設計更方便啦
但並非所有 display property 都有支援,下方為官方文件說明。

 

 

Colors:預定義顏色在使用上也更多元,附上官方說明

text-{colors} 也可以搭配 bg-{colors}使用

進階一點可以至 _variables.scss 調整、額外定義樣式,客製一個按鈕好快啊

 

Responsive breakpoints mixins
這次更貼心幫你把 RWD 常用的 mixins 都幫你寫好了

 

 

Header 及 Loader 常用到的 z-index ,

Bootstrap 中部分元件也有使用到,若跟你的 css 發生衝突可以先參考官方的預設值(官方文件上提到不鼓勵去修改元件設定的預設值)

 

短評及心得:太強大惹

 

圖片來源:http://getbootstrap.com/

參考資料:https://getbootstrap.com/docs/4.0/getting-started/introduction/