3-10. BS5 通用類別 TS 重點整理
| NO | 項目 | 繁中說明 | 摘要說明 |
|---|---|---|---|
| 1 | 有關 display 通用類別 | LINK |
.d-none／
.d-inlne／
.d-inline-block／
.d-block／
.d-flex／... 可以配合「中斷點」sm、md、lg、xl、xxl 例如sm時隱藏md再以block顯示：.d-sm-none .d-md-block |
| 2 | 有關 flex 的設計使用 | LINK |
可以配合「中斷點」sm、md、lg、xl、xxl，例如：
.d-flex／
.d-md-flex 方向性：.flex-row／.flex-row-reverse／.flex-column／.flex-column-reverse 主軸對齊：.justify-content-start／end／center／between／around／evenly 交叉軸物件對齊：.align-items-start／end／center／baseline／stretch 交叉軸內容對齊：.align-content-start／end／center／between／around／stretch 自身對齊：.align-self-start／end／center／baseline／stretch (設定在子元素) 填滿寬度：.flex-fill (設定在子元素) 配合自動的margins： 右側結尾處.me-auto／ 左側起始處.ms-auto 是否允許換行：.flex-wrap／.flex-nowrap |
| 3 | 有關 margin ／ padding | LINK |
可以配合「中斷點」 有關 margin 的設定以 .m- 開頭 有關 padding 的設定以 .p- 開頭 使用格式 {property}{sides}-{breakpoint}-{size} 命名，例如：.mt-2 .mt-md-4 sides 設定:
|
| 4 | 有關 border 邊框 | LINK |
顯示邊框 .border／border-top／border-bottom／border-start／border-end 邊框寬度 .border border-1／border-2／border-3／border-4／border-5 邊框圓角 .rounded／rounded-top／rounded-bottom／rounded-start／rounded-end 邊框圓角 .rounded-circle／.rounded-pill 圓角大小 .rounded-0／.rounded-1／.rounded-2／.rounded-3 |
| 5 | 有關 float 浮動 | LINK | 浮動靠左 .float-start／ 浮動靠右 .float-end／ 不浮動 .float-none (可配合中斷點) |
| 6 | 有關文字選擇 | LINK |
.user-select-all --- 當使用者點選時，這個段落將會被全選 .user-select-auto --- 這個段落具有預設的選取行為 .user-select-none --- 當使用者點選的時候，此段落將不會被選取 |
| 7 | 有關 opacity 透明度 | LINK | 不透明度100% .opacity-100／.opacity-75／.opacity-50／.opacity-25 |
| 8 | 有關 overflow 溢出 | LINK | .overflow-auto／.overflow-hidden／.overflow-visible／.overflow-scroll |
| 9 | 有關 shadows 陰影 | LINK | .shadow-none／.shadow-sm／.shadow／.shadow-lg |
| 10 | 有關 Sizing 尺寸 | LINK |
相對於父元素的百分比 .w-25／.w-50／.w-75／
.w-100／
.w-auto 相對於父元素的百分比 .h-25／.h-50／.h-75／ .h-100／ .h-auto 還可以使用 .mw-100 和 .mh-100 相對於視窗的百分比 .min-vw-100／.min-vh-100／ .vw-100／.vh-100 |
| 11 | 有關 position 定位 | LINK |
.position-static／.position-relative／ .position-absolute／ .position-fixed／ .position-sticky |
| 12 | 有關文字水平對齊 | LINK | .text-start／.text-center／.text-end (可配合中斷點) |
| 13 | 有關文字斷行 | LINK | .text-break 表示文字在區塊空間中允許文字斷行 |
| 14 | 有關文字大小 | LINK |
fs-1（2.5rem） fs-2（2rem） fs-3（1.75rem） fs-4（1.5rem） fs-5（1.25rem） fs-6（1rem） |
| 15 | 有關文字樣式 | LINK | 粗體 .fw-bold ／ 不加粗 .fw-normal ／ 斜體 .fst-italic ／ 不斜體 .fst-normal |
| 16 | 有關文字裝飾線條 | LINK | .text-decoration-underline ／ .text-decoration-line-through ／ .text-decoration-none |
| 17 | 有關 inline 物件的垂直對齊 | LINK |
.align-baseline ／ .align-text-top ／ .align-text-bottom .align-top ／ .align-middle ／ .align-bottom ／ |
| 18 | 有關 Visibility 可視性 | LINK |
.visible 顯示 .invisible 隱藏 --- 完全不會改變 display 的值, 也不影響佈局, 仍會佔用頁面空間 |
