//垂直堆疊
```
- 垂直分隔線：`
` tag的兄弟 ```javascript=
```
## Utilities ( 通用類別 )
- 背景顏色：
`bg-primary`
- 邊框：
- 增加邊框
```javascript=
//border
```
* 減少邊框
```javascript=
//border-0
```
- 邊框顏色：
```javascript=
```
* 邊框寬度：有1~5
```javascript=
```
- 園角：
```javascript=
//rounded
//右
//左
```
- 園角尺寸半徑：0~3
```javascript=
//半徑如下：
$border-radius: 0.25rem !default;//rounded-1
$border-radius-sm: 0.2rem !default;//rounded-2
$border-radius-lg: 0.3rem !default;//rounded-3
$border-radius-pill: 50rem !default;
```
- Display：
`.d-{value} for xs`
`.d-{breakpoint}-{value} for sm, md, lg, xl, and xxl.`
//value 為以下其中一個：
- none
- inline
- inline-block
- block
- grid
- table
- table-cell
- table-row
- flex
- inline-flex
```javascript=
//沒有!important的inline
//左
//右 //max-width
//max-height
```
- 相對於視窗(min)
```javascript=
//min-vw-100
//水平堆疊
```
- Card：連結延伸 (Stretched link)：透過 CSS 將連結 “延伸”，令任何 HTML 元素或 Bootstrap 元件變得可點擊。
```javascript=
First item
Second item
Third item
帶有延伸連結的卡片
Some quick example text to build on the card title and make up the bulk of the card's content.
//stretched-link Go somewhere` tag的兄弟 ```javascript=
First item
Second item
//vr垂直分隔線
Third item
- This is a list item.
- And another one.
- But they're displayed inline.
Float start on all viewport sizes
//左
Float end on all viewport sizes
//右
Don't float on all viewport sizes
//清除浮動
```
- 溢出 (Overflow)：
```javascript=
//overflow-auto
...
//常用
...
...
...
```
- 位置 (Position)：
```javascript=
//position-relative
...
...
...
...
...
//自訂responsive： position-lg-relative
```
- 排列元素：
- top - 用於垂直定位 top
- start - 用於水平定位 left (LTR)
- bottom - 用於垂直定位 bottom
- end - 用於水平定位 right (LTR)
其中，position 為以下的其中一種:
- 0 - 用於 0 的邊界定位
- 50 - 用於 50% 的邊界定位
- 100 - 用於 100% 的邊界定位
```javascript=
//元素中心點為右下角
//元素中心點為左上角
```
- 元素置中：以元素的重心為中間點
此類別將 transform 之 translateX(-50%) 與 translateY(-50%) 應用於元素，並結合使用邊界定位通用類別，讓你可以把元素完全置中。
```javascript=
//在外框的正中心
//只針對X軸的中心點
//自訂responsive：translate-middle-lg
```
- 透明度：
```javascript=
//opacity-
...
...
...
...
```
- 陰影 (Shadows)：
```javascript=
//shadow
No shadow
Small shadow
Regular shadow
Larger shadow
```
- 尺寸 (Sizing)：
- 預設包含 `25%, 50%, 75%, 100% 和 auto`
```javascript=
//w-25、h-25
Width 25%
Height 25%
```
- 您還可以根據需求使用 max-width: 100%; 和 max-height: 100%; 通用類別。
```javascript=
//mw-100、mh-100
Min-width 100vw
Min-height 100vh
Width 100vw
Height 100vh
```
- 間隔 (Spacing)：
如果是適用於所有從 xs 到 xxl 斷點的間隔通用類別，就不需加入中斷點縮寫。因為從 min-width: 0 以上開始都將應用這些類別，因此不受 media query 的約束。但若是針對其餘斷點，就需要包含中斷點縮寫。
對於 xs 使用固定格式 {property}{sides}-{size} 命名，對於 sm、md、lg、xl 和 xxl，使用格式 {property}{sides}-{breakpoint}-{size} 命名。
*property* 設定:
- `m` - 設定 margin 的類別
- `p` - 設定 padding 的類別
*sides* 設定:
- `t` - 設定 margin-top 或是 padding-top 的類別
- `b` - 設定 margin-bottom 或是 padding-bottom 的類別
- `s` - (start) 在 LTR 設定 margin-left 或是 padding-left， RTL 設定 margin-right 或是 padding-right
- `e` - (end) 在 LTR 設定 margin-right or padding-right， RTL 設定 margin-left 或是 padding-left
- `x` - 同時設定 *-left 和 *-right
- `y` - 時設定 *-top 和 *-bottom
- `blank(空白)` - 同時設定 margin 或 padding 在元素的四個邊緣
*size* 設定:
- `0` - 設定 margin 或是 padding 為 0
- `1` - (預設) 設定 margin 或是 padding 為 $spacer * .25 //4
- `2` - (預設) 設定 margin 或是 padding 為 $spacer * .5 //8
- `3` - (預設) 設定 margin 或是 padding 為 $spacer = 1 rem //16
- `4` - (預設) 設定 margin 或是 padding 為 $spacer * 1.5 //24
- `5` - (預設) 設定 margin 或是 padding 為 $spacer * 3 //48
- `auto` - 設定 margin 為 auto
margin可以設為負值： [https://getbootstrap.com/docs/5.0/utilities/spacing/#margin-and-padding](https://getbootstrap.com/docs/5.0/utilities/spacing/#margin-and-padding)
自訂：
```sass
$spacers: (
0: 0,
1: $spacer * 0.25, //4
2: $spacer * 0.5, //8
25: $spacer * 0.75, //12
3: $spacer, //16
35: $spacer * 1.25, //20
4: $spacer * 1.5, //24
5: $spacer * 2, //32
6: $spacer * 2.5, //40
7: $spacer * 3, //48
l60: $spacer * 3.75, //60
l64: $spacer * 4, //64
) !default;
```
```javascript=
//複製貼上用
0: 0,
1: $spacer * 0.25,
2: $spacer * 0.5,
25: $spacer * 0.75,
3: $spacer,
35: $spacer * 1.25,
4: $spacer * 1.5,
5: $spacer * 2,
6: $spacer * 2.5,
7: $spacer * 3,
l60: $spacer * 3.75,
l64: $spacer * 4,
```
- 文字大小：對應.h1–.h6，有1~6(大~小)
```javascript=
.fs-1 text
//2.5rem(40px).fs-2 text
//2rem(32px).fs-3 text
//1.75rem.fs-4 text
//1.5rem.fs-5 text
//1.25rem.fs-6 text
//1rem ``` ```sa 六角的倍數： $h1-font-size: $font-size-base * 4; //64px $h2-font-size: $font-size-base * 3; //48px $h3-font-size: $font-size-base * 1.75; //28px $h4-font-size: $font-size-base * 1.5; //24px $h5-font-size: $font-size-base * 1.25; //20px $h6-font-size: $font-size-base; //16px $h7-font-size: $font-size-base * 0.875 ;//14px，同 $h8-font-size: $font-size-base * 0.75 ;//12px 6: $h6-font-size, 7: $h7-font-size, 8: $h8-font-size, $display-font-sizes: ( 1: 5rem, //80 2: 4.5rem, //72 3: 4rem, //64 4: 3.5rem, //56 5: 3rem, //48 6: 2.5rem, //40 ) !default; ``` - 文字截斷(Text truncation)：.text-`truncate`：以透過刪節號截斷文字。需為 display: inline-block 或是 display: block。父層須限制寬度 - 文字顏色： ```javascript= //text-primary.text-primary
``` - 文字對齊： ```javascript= //text-startStart aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
End aligned text on all viewport sizes.
(text-md-start) ``` - 換行：使用 .text-nowrap 強制文字不換行。 ```javascript= //text-wrap、text-nowrap
```
- 大小寫變換：
```javascript=
//text-uppercase
`
這行文本旨在被視為不再準確。 ``
這行文本旨在被視為對文檔的補充。 ``
++這行文本將呈現為帶下劃線。++ ``
這行文本應被視為精美的印刷品。 ``
**此行呈現為粗體文本。** `****`( ctrl + b )
*此行呈現為斜體文本。* `**`( ctrl + i )
請注意，這些標籤目的目的：
- `` 代表被標記的重點是文本，以供參考或標記。
- `` 代表旁注和小字體，例如版權聲明和版權文字。
- `` 不再代表相關或不再準確的元素。
- `` 代表一定範圍的行內文字，應表現出其具有非文本文字的方式。
如果你只是想在文本上加入樣式，你應該改用以下幾類：
- .mark與``風格一致。
- .small與``風格一致。
- .text-decoration-underline與``風格一致。
- .text-decoration-line-through與``風格一致。
- 粗細和斜體：font-weight 或 font-style。font-style 通用類別的縮寫為 .fst-*， font-weight 通用類別的縮寫為 .fw-*。
```javascript=
//font-weight
//表格顏色、條紋間距、hover變色
//邊框、藍色邊框、無邊框
//垂直置中
Lowercased text.
Uppercased text.
CapiTaliZed text.
//只有將第一個字母轉為大寫，而其他字母不受影響。 ``` - 標題字：當你需要突出一個標題時，請考慮使用 display heading 以獲得更大、更細、稍具有風格化的標題樣式。有1~6(大~小) ```javascript= //display-1Display 1
``` - 行內 HTML5 元素的格式： 您可以使用==mark==標籤 強調 文本。 `` ~~這行文本將被視為已刪除的文本。~~ `Bold text.
Bolder weight text (relative to the parent element).
Normal weight text.
Light weight text.
Lighter weight text (relative to the parent element).
//font-styleItalic text.
Text with normal font style
``` - 行高(line height)： ```javascript=This is a long paragraph written to show how the line-heigh
This is a long paragraph written to show how the line-height
This is a long paragraph written to show how the line-height
This is a long paragraph written to show how the line-height
``` - 重置色彩：使用 .text-reset 來重置一個文字或連結色彩，以便它們繼承父層的顏色。 ```javascript= //text-muted//柔和的文字 Muted text with a reset link.
``` - 文字裝飾： ```javascript= //text-decoration-noneThis text has a line underneath it.
//底線This text has a line going through it.
//刪除線 This link has its text decoration removed ``` - 文字排版： - 無樣式：ul>li ```javascript=- This is a list.
- It appears completely unstyled.
- This may still come in handy in some situations.
- This is a list item.
- And another one.
- But they're displayed inline.
| # | First |
|---|---|
| 1 | //或是凸顯一格Mark |