Bootstrap 4 Utilities 具有多項通用類別供使用，並可搭配 Components 做組合技延伸更多不同效果，很多你考慮過或未考慮過的類別它都幫你想好了，可省略很多手刻通用類別以及複製到新專案的工，還能不用嗎？一起跟著我官網來看看有什麼好用的類別吧！
官方文件：https://getbootstrap.com/docs/4.0/utilities/
Borders
- .border (預設淺灰)、.border-0、.border-{sides}-0
- color：.border + .border-{colors}
- border-radius：.rounded、.rounded-{sides}、.rounded-circle、.rounded-0
Clearfix
清除浮動，.float-left、.float-right 的父層元素用，使其空間正常
Close Icon
用在 alert 與 modals 的 components 上，是一個整段 <button> 程式碼
特別要加上 aria-label 元素屬性給看不見的人用
Colors
primary、secondary、success、danger、warning、info、light、dark
分為兩個部分：
- 文字
- text-{colors}
- 單純文字
- 連結
- 滑鼠滑入會比較深一點
- 背景
- bg-{colors}
- 文字要記得搭配不同色彩
Display
就是 display 屬性，套用時要注意標籤，可搭配不同斷點
- .d-{value} for xs
- .d-{breakpoint}-{value} for sm, md, lg and xl
Embed
響應式的 iframe 功能，官方範例是 youtube 影片，它會保留 iframe 的比例 (21by9、16by9、4by3、1by1)
- iframe parent class：.embed-responsive + .embed-responsive-{比例}
- iframe class：.embed-respomsive-item
Flex
- Direction – 排列方向：
- .flex-row
- .flex-row-reverse
- .flex-column
- .flex-column-reverse
- Justify content – 主軸元件排列：
- .justify-content-start
- .justify-content-end
- .justify-content-center
- .justify-content-between
- .justify-content-around
- Align items – 交錯軸元件排列：
- .align-items-start
- .align-items-end
- .align-items-center
- .align-items-baseline
- .align-items-stretch：從頭到尾的伸展開來
- Align self – 交錯軸單一元件的排列 (所以 align-items 要加 s 的關係)
- .align-self-start
- .align-self-end
- .align-self-center
- .align-self-baseline
- .align-self-stretch
- Auto margins
- 用在 flex 內元件
- 讓相鄰的 flex 內元件把空間推移開來
- Wrap – 物件超過寬度是否換行
- .flex-wrap
- .flex-nowrap
- .flex-wrap-reverse
- Order – 排序
- 1 ~ 12：order-{number}
- Align content – 有出現換行的時候所有元件排列
- .align-content-start
- .align-content-end
- .align-content-center
- .align-content-baseline
- .align-content-stretch
Float
- .float-left
- .float-right
- .float-none：清除它原本的浮動 (有 .float-left or .float-right 的元素上)
- 有包含斷點：.float-{sm、md、lg、xl}-{left、right、none}
- 記得外層要加入 clearfix 清除浮動
Image replacement
隱藏文字的功能，用在背景圖有意義的時候，為了讓搜尋引擎做搜尋，但是這個文字是不需要顯示，僅為了 SEO 而存在，就可用 .text-hide 使其文字隱藏，通常運用在 Logo。
Position
- .fixed-top：移動到畫面頂端
- .fixed-bottom：移動到畫面底部
- .sticky-top：貼齊於頂端，將一個元素置於可視區的頂部，從邊緣到邊緣，但僅在你滾動視窗經過它之後。但它沒支援所有瀏覽器，IE 11 與 Edge，會把 sticky 當成 relative 來使用。
Screenreaders
螢幕閱讀器 用戶使用
透過 .sr-only 將一個元素對所有設備隱藏 除了螢幕閱讀器。將 .sr-only 與 .sr-only-focusable 結合，以便在其被 focused 時再次顯示該元素 (例如透過鍵盤使用)
Sizing
提供不同的寬與高的尺寸，寬 w，高則為 h，有 25、50、75 與 100 % 四種數值
- .w-25、.w-50、.w-75、.w-100
- .h-25、.h-50、.h-75、.h-100
- .mw-100：max-width: 100%
- .mh-100：max-height: 100%
Spacing
- 讓元件友善加上 margin 與 padding 的屬性
- 屬性-方向-尺寸 (組合技)：
- {property}{sides}-{size} for xs
- {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl
- sides 沒填就是 4 個方向都填
- size：0 ~ 5，$spacer * (0、.25、.5、1、1.5、3)
- $spacer 就是 1rem，16px
- .m*-auto 可運用在 flex (很常用到)
Text
- .text-justify：使其文字對齊
- .text-left
- .text-center
- .text-right
- .text-{left、center、right} 有包含不同的中斷點
- .text-sm-{left、center、right}
- .text-md-{left、center、right}
- .text-lg-{left、center、right}
- .text-xl-{left、center、right}
- .text-nowrap：使文字不會換行
- .text-truncate：超過空間文字用…替代，不過內容要設定寬度才會有效
- .text-lowercase
- .text-uppercase
- .text-capitalize：字母首字改大寫
- .text-weight-bold
- .text-weight-normal
- .text-italic：改成斜體字
vertical-align
不同的垂直對齊方法，很容易用在表格上
- .align-baseline：對其文字基準線
- .align-top
- .align-middle
- .align-bottom
- .align-text-top：圖片套用，其他文字會對齊頂部
- .align-text-bottom：圖片套用，其他文字會對齊底部
Visibility
會讓物件消失，但空間保留
- .visible
- .invisible
以上是 utilities 的重點精華，可再往下閱讀 Components 重點精華 篇囉！(讀好讀滿)
參考資料：