今天要來介紹 Bootstrap 工具、通用類別

在這章節中，最重要的就是要熟悉各種裝置尺寸代號，

在最小版面時會做怎樣的呈現、會隱藏掉什麼東西、
大一點的版時又會怎樣的呈現、哪些原本被隱藏的元素會出現
或者當尺寸變大後才會隱藏的小物件...等等。

margin, padding (對應Spacing章節)

margin與padding 是 Bootstrap中調整距離的利器。

margin跟padding單字太長，bootstrap都改為縮寫，
m, p 代表選擇使用margin或padding

t, b, l, r, x, y 用來指定方向，分別代表 上、下、左、右、X軸(左+右)、Y軸(上+下)

在Bootstrap 版本5 以後，l, r 改為 s 跟 e(start, end)，
方向不再是左、右了，而是開始與結束的位置。
或許是有些語系書寫的起始方向不是左到右、以及考量到繼承後方向性的關係，才改變用法的。

如果是上下左右都要，就省略方向、直接 m, p

數值級距: 0 ~ 5 、auto 數字越大距離越長，但距離不是等差增長(一倍、兩倍、三倍距離)，而是如下圖。
裝置代號: sm, md, lg, xl, xxl

練習:

1. margin往下推兩個級距: mb-2
2. padding往右側推兩個級距: pe-2
3. 只有裝置寬度在lg以上時，margin才不會往下推: mb-lg-0
4. margin不會往下推，只有當寬度lg以上時 margin才會往下推三個級距: mb-0 mb-lg-3

顯示方式 (對應Display章節)

在css中的display直接被縮寫成d

display: none 縮寫為 d-none
display: block縮寫為 d-block
display: inline縮寫為 d-inline
display: flex縮寫為 d-flex

裝置代號: sm, md, lg, xl, xxl

練習:

1. 以flex排版顯示: d-flex
2. 只有裝置寬度在md以上時，才做以flex排版顯示: d-md-flex
3. 在裝置寬度小於lg時不呈現，當大於lg時才會顯示元素: d-none d-lg-block

colors (對應Background、Colors 章節)

快速調整內容文字、背景顏色。

bg與text: 背景色、文字內容顏色
primary, secondary, light, dark, success, danger, warning, info: 不同情境下的背景顏色

程式碼中的--bs開頭的顏色變數，會對應到各自的色碼

如果以上這些顏色都不是你想要的顏色，當然可以新增自己網站的主題顏色的class，名稱如: bg-accent、bg-accent-lighter、text-accent-dim 等等，accent中文意思為口音、強調色。
另一種方式是透過Sass編譯來修改或者新增顏色。

將顏色命名成class時盡量避開以顏色(red、pink、yellow等)來命名，
盡量想個比較抽象意境、概括性的單詞會比較好。

否則，假如今天命名 .red{color: #FF0000} 大量用在主題顏色上
結果做完需求一變更、主題色要求馬上改成其他顏色，例如原本套用到.red樣式的class通通要改成藍色，
若此時只改色碼而不改class名稱，將會出現有點詭異的class .red{color: #0000FF}

練習:

1. 背景淺白色: bg-light
2. 文字內容深色: text-dark