# Bootstrap 通用類別 ###### tags: `BootStrap` Date : 2022/05/18 ## 背景 與上下文文字顏色類別相似，將元素的背景設定為任何上下文類別。背景通用類別 沒有設定 color，所以在某些情況下你需要使用 `.text-* 顏色通用類別`。 ![](https://i.imgur.com/5bo1s3q.png) ```html <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div> <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div> <div class="p-3 mb-2 bg-success text-white">.bg-success</div> <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div> <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div> <div class="p-3 mb-2 bg-info text-dark">.bg-info</div> <div class="p-3 mb-2 bg-light text-dark">.bg-light</div> <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div> <div class="p-3 mb-2 bg-body text-dark">.bg-body</div> <div class="p-3 mb-2 bg-white text-dark">.bg-white</div> <div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div> ``` ### 背景漸層 通過添加 `.bg-gradient` 類別，將 linear gradient 作為背景圖像添加到背景中。這個漸層從半透明的白色開始，逐漸淡出到底部。 > 你的自定義 CSS 需要漸層嗎？只需添加 background-image: var(--bs-gradient);。 ![](https://i.imgur.com/ArUw5yI.png) :::danger 需要漸層色明顯或是漸白/漸黑，可以修改"`--bs-gradient`" ::: ### 透明度 Opacity ```html <div class="bg-primary text-white bg-opacity-10">.bg-primary</div> ``` ![](https://i.imgur.com/JP4hJYL.png) ## 邊框 (Borders) ### 增加 ```html <div class="row"> <div class="col"><span class="border border-1"></span></div> <div class="col"><span class="border-top border-2"></span></div> <div class="col"><span class="border-end border-3"></span></div> <div class="col"><span class="border-bottom border-4"></span></div> <div class="col"><span class="border-start border-5"></span></div>x </div> ``` ![](https://i.imgur.com/1NKLl1l.png) ### 減少 ```html <div class="row"> <div class="col"><span class="border border-0"></span></div> <div class="col"><span class="border border-top-0"></span></div> <div class="col"><span class="border border-end-0"></span></div> <div class="col"><span class="border border-bottom-0"></span></div> <div class="col"><span class="border border-start-0"></span></div> </div> ``` ![](https://i.imgur.com/0Yx9TLH.png) ### 邊框顏色 ```html <div class="row"> <div class="col"><span class="border border-primary"></span></div> <div class="col"><span class="border border-secondary"></span></div> <div class="col"><span class="border border-success"></span></div> <div class="col"><span class="border border-danger"></span></div> <div class="col"><span class="border border-warning"></span></div> <div class="col"><span class="border border-info"></span></div> <div class="col"><span class="border border-light"></span></div> <div class="col"><span class="border border-dark"></span></div> <div class="col bg-secondary"><span class="border border-white"></span></div> </div> ``` ![](https://i.imgur.com/L0WLhsD.png) ### Border-radius ```html <img src="..." class="rounded" alt="..."> <img src="..." class="rounded-top" alt="..."> <img src="..." class="rounded-end" alt="..."> <img src="..." class="rounded-bottom" alt="..."> <img src="..." class="rounded-start" alt="..."> <img src="..." class="rounded-circle" alt="..."> <img src="..." class="rounded-pill" alt="..."> ``` ![](https://i.imgur.com/0PnAix1.png) / ```html <div class="row"> <div class="col"> <img src="https://picsum.photos/75/75/?random=1" class="rounded"> </div> <div class="col"> <img src="https://picsum.photos/75/75/?random=2" class="rounded-top"> </div> <div class="col"> <img src="https://picsum.photos/75/75/?random=3" class="rounded-end"> </div> <div class="col"> <img src="https://picsum.photos/75/75/?random=4" class="rounded-bottom"> </div> <div class="col"> <img src="https://picsum.photos/75/75/?random=5" class="rounded-start"> </div> <div class="col"> <img src="https://picsum.photos/75/75/?random=6" class="rounded-circle"> </div> <div class="col"> <img src="https://picsum.photos/150/75/?random=7" class="rounded-pill"> </div> <div class="col"> <img src="https://picsum.photos/75/75/?random=8" class="rounded-0"> </div> </div> ``` ![](https://i.imgur.com/LlYOaX0.png) ### 邊框寬度 ![](https://i.imgur.com/Jz7bOda.png) ## 顏色 (Colors) 使用 color 通用類別為文字上色。如果要為連結上色，你可以使用 .link-* helper classes。它們具有 :hover and :focus 的狀態。 ![](https://i.imgur.com/SZlWo6M.png) ```html <p class="text-primary">.text-primary</p> <p class="text-secondary">.text-secondary</p> <p class="text-success">.text-success</p> <p class="text-danger">.text-danger</p> <p class="text-warning bg-dark">.text-warning</p> <p class="text-info bg-dark">.text-info</p> <p class="text-light bg-dark">.text-light</p> <p class="text-dark">.text-dark</p> <p class="text-body">.text-body</p> <p class="text-muted">.text-muted</p> <p class="text-white bg-dark">.text-white</p> <p class="text-black-50">.text-black-50</p> <p class="text-white-50 bg-dark">.text-white-50</p> ``` ## 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 ![](https://i.imgur.com/7jqsYwy.png) ### 隱藏元素 d-none 隱藏 ```html <div class="d-flex justify-content-center align-items-center d-lg-none bg-primary text-white" style="width:300px;height:300px;"> lg 尺寸上消失 /div> <div class="d-none d-lg-block bg-success text-white">xs 尺寸以上消失，lg 尺寸出現</div> ``` ![](https://i.imgur.com/P9GHQX0.png) ### 運用在列印的 Display ```html <div class="d-print-none bg-danger text-white">螢幕出現(列印隱藏)</div> <div class="d-none d-print-block bg-success text-white">列印出現(螢幕隱藏)</div> <div class="d-none d-lg-block d-print-block bg-primary text-white">xs 尺寸以上消失，lg 尺寸出現，列印也會出現</div> ``` ## 浮動 (Float) ![](https://i.imgur.com/glQTrjF.png) ```htmlembedded= <div class="float-start">Float start on all viewport sizes</div><br> <div class="float-end">Float end on all viewport sizes</div><br> <div class="float-none">Don't float on all viewport sizes</div> ``` - 響應式 ![](https://i.imgur.com/DsRgDxp.png) ```htmlembedded= <div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br> <div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br> <div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br> <div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</div><br> ``` ![](https://i.imgur.com/xlKgL0l.png) ## 互動 (Interactions) ### 文字選擇 ```htmlembedded= <p class="user-select-all">當使用者點選時，這個段落將會被全選。</p> <p class="user-select-auto">這個段落具有預設的選取行為。</p> <p class="user-select-none">當使用者點選的時候，此段落將不會被選取</p> ``` ### Pointer 事件 Bootstrap 提供 `.pe-none` 與 `.pe-auto `類別，以移除、添加元素的互動性。 ![](https://i.imgur.com/AwZZGBg.png) ```htmlembedded= <p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">這個連結</a> 不可被點選</p> <p><a href="#" class="pe-auto">這個連結</a> 可以被點選 (此為預設行為).</p> <p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">這個連結</a> 無法被點選，因為其 <code>pointer-events</code> 屬性繼承自父層。然而 <a href="#" class="pe-auto">這個連結</a> 具有 <code>pe-auto</code> 類別，因此可以被點選。</p> ``` - 定位堆疊造成連結可點擊的假象 ![](https://i.imgur.com/evHlVPa.png) 可以在 particle 加上 point-event:none，這樣就具有穿透的效果。 ```htmlembedded= <div class="box"> <a href="https://www.google.com">前往連結</a> <div class="particle"></div> </div> ``` ## 透明度 (Opacity) ![](https://i.imgur.com/z53CEs7.png) ```htmlembedded= <div class="opacity-100">...</div> <div class="opacity-75">...</div> <div class="opacity-50">...</div> <div class="opacity-25">...</div> ``` ## 溢出 (Overflow) ![](https://i.imgur.com/Ntc7nhY.png) ```htmlembedded= <div class="overflow-auto">...</div> <div class="overflow-hidden">...</div> <div class="overflow-visible">...</div> <div class="overflow-scroll">...</div> ``` ## 位置 (Position) ### 定位值 ```htmlembedded= <div class="position-static">...</div> <!--預設--> <div class="position-relative">...</div> <!--相對定位--> <div class="position-absolute">...</div> <!--絕對定位--> <div class="position-fixed">...</div> <!--固定--> <div class="position-sticky">...</div> <!--黏貼標籤--> ``` ### 排列位置 ： {property}-{position} 其中，property 為以下的其中一種: - top - 用於垂直定位 top - start - 用於水平定位 left (LTR) - bottom - 用於垂直定位 bottom - end - 用於水平定位 right (LTR) 其中，position 為以下的其中一種: - 0 - 用於 0 的邊界定位 - 50 - 用於 50% 的邊界定位 - 100 - 用於 100% 的邊界定位 ![](https://i.imgur.com/jGXwCdJ.png) ```htmlembedded= <div class="position-relative"> <div class="position-absolute top-0 start-0"></div> <div class="position-absolute top-0 end-0"></div> <div class="position-absolute top-50 start-50"></div> <div class="position-absolute bottom-50 end-50"></div> <div class="position-absolute bottom-0 start-0"></div> <div class="position-absolute bottom-0 end-0"></div> </div> ``` ### 置中 > 可以透過轉換通用類別 `.translate-middle` 將元素置中。 >此類別將 transform 之 translateX(-50%) 與 translateY(-50%) 應用於元素，並結合使用邊界定位通用類別，讓你可以把元素完全置中。 > ![](https://i.imgur.com/Zj76pkf.png) ```htmlembedded= <div class="box position-relative"> <div class="box1 position-absolute top-50 start-50 translate-middle"></div> </div> <div class="box position-relative"> <div class="box2 position-absolute start-50 translate-middle-x"></div> </div> <div class="box position-relative"> <div class="box3 position-absolute top-50 translate-middle-y"></div> </div> ``` ![](https://i.imgur.com/ogfabuk.png) ## 陰影 (Shadows) ![](https://i.imgur.com/wHfMlFT.png) ```html <div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div> <div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div> <div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div> <div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div> ``` ## 尺寸 (Sizing) w-* ![](https://i.imgur.com/rPoQgzT.png) ```htmlembedded= <div class="w-25 p-3" style="background-color: #eee;">Width 25%</div> <div class="w-50 p-3" style="background-color: #eee;">Width 50%</div> <div class="w-75 p-3" style="background-color: #eee;">Width 75%</div> <div class="w-100 p-3" style="background-color: #eee;">Width 100%</div> <div class="w-auto p-3" style="background-color: #eee;">Width auto</div> ``` h-* ![](https://i.imgur.com/R4uER7K.png) ```htmlembedded= <div style="height: 100px; background-color: rgba(255,0,0,0.1);"> <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div> <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div> <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div> <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div> <div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div> </div> ``` >可以根據需求使用 max-width: 100%; 和 max-height: 100%; 通用類別。 ```htmlembedded= <!--使用通用類別來設定相對於視窗的寬度和高度。--> # <div class="min-vw-100">Min-width 100vw</div> # <div class="min-vh-100">Min-height 100vh</div> # <div class="vw-100">Width 100vw</div> <div class="vh-100">Height 100vh</div> ``` ## 間隔 (Spacing) p-* / m-* **property 設定:** * m - 設定 margin 的類別 * p - 設定 padding 的類別 **sides 設定:** * t - 設定 margin-top 或是 padding-top 的類別 * b - 設定 margin-bottom 或是 padding-bottom 的類別 * s - 在 LTR 設定 margin-left 或是 padding-left， RTL 設定 margin-right 或是 padding-right * e - 在 LTR 設定 margin-right or padding-right， RTL 設定 margin-left 或是 padding-left * x - 同時設定 *-left 和 *-right * y - 同時設定 *-top 和 *-bottom * 空白 - 同時設定 margin 或 padding 在元素的四個邊緣 **size 設定:** * 0 - 設定 margin 或是 padding 為 0 * 1 - (預設) 設定 margin 或是 padding 為 $spacer * .25 * 2 - (預設) 設定 margin 或是 padding 為 $spacer * .5 * 3 - (預設) 設定 margin 或是 padding 為 $spacer * 4 - (預設) 設定 margin 或是 padding 為 $spacer * 1.5 * 5 - (預設) 設定 margin 或是 padding 為 $spacer * 3 * auto - 設定 margin 為 auto ## 文字 (Text) ### 對齊 ![](https://i.imgur.com/MvwQyBA.png) ### Text wrap 和 overflow ![](https://i.imgur.com/i4NX4Y2.png) ### 大小寫變換 ![](https://i.imgur.com/zUDhuFe.png) ### 文字大小 ![](https://i.imgur.com/SRPPlyi.png)