---
tags: Bootstrap5網頁切版整合術
---
# 4. 通用類別 Utilities 與 工具 Helpers
## Utilities
漸層色 開啟後的其他元件也會變漸層

colors:
text-black-50 帶有透明度的黑
text-white-50

連結文字用link-情境色，不適合用text-情境色，因有無hover顏色都一樣

互動（bootstrap4好像沒有這個）

overflow-auto 可用來製作手機版水平滾動選單

translate-middle

### shadow (從這開始 手冊已練習)
shadow可加在.card，不要加在格線.col

* Meterial Design-六角學院 陰影運用
https://material-design.hexschool.io/environment/elavation.html#material-design-%E4%B8%AD%E7%9A%84%E5%B1%A4%E9%AB%98

### sizing
* 讓卡片等高呈現，統一在.card加上.h-100

* .vh-100 .vw-100: 相對於視窗寬度 (瀏覽器或裝置)

### text
.text-wrap : 依單字換行
.text-nowrap: 不換行，不受容器限制
.text-break: 依容器換行
.monospace: 設定等寬字體
.text-reset: 繼承父層顏色 例如p裡面的a連結就可以設定.text-reset

### Vertical Alignment
* 垂直對齊僅影響 inline、inline-block、inline-table、和 table 元素
* 通常會用在表格對齊，搭配 table cell 元素，.align-middle較常用

## Helpers

### clearfix

1. 使用 .float-start、.float-start 外層容器不會自己延展，範例底色被卡掉了
2. 以前是在浮動元素後面新增一個空的 div，設定 css clear:both 來清除浮動
3. bs5直接在外層 div 加上 .clearfix，
.clearfix會先加上偽元素 ::after 後設定 clear:both， 範例藍色底就出現了


### Ratio 比例
* Custom ratios 也可以自訂變數--bs-aspect-ratio:50%，
要在外層加上寬，範例高度為寬度的50%、也可設定直式--bs-aspect-ratio:200%

### Visually hidden
給螢幕閱讀器使用的，按tab會呈現文字

### Stretched link(待補)

### Text truncation

* 內層文字限制行數: .text-truncation會縮減到一行，
範例想呈現3行，1行是1.5rem，在p加上width: 4.5rem，再加上.overflow-hidden，也可達到截斷文字效果