Bootstrap 5 實用工具

實用工具 / 輔助類

Bootstrap 5 提供了許多實用/輔助類，無需編寫任何 CSS 程式碼即可快速樣式化元素。

邊框

使用 border 類新增或移除元素的邊框

邊框寬度

使用 .border-1 到 .border-5 來改變邊框的寬度

邊框顏色

使用任何上下文邊框顏色類為邊框新增顏色

邊框圓角

使用 rounded 類為元素新增圓角

浮動和清除浮動

使用 .float-end 類將元素浮動到右側，或使用 .float-start 浮動到左側，並使用 .clearfix 類清除浮動

響應式浮動

根據螢幕寬度，使用響應式浮動類 (.float-*-start|end - 其中 * 是 sm (>=576px)、md (>=768px)、lg (>=992px)、xl (>=1200px) 或 xxl (>=1400px)) 將元素浮動到左側或右側

居中對齊

使用 .mx-auto 類居中元素（新增 margin-left 和 margin-right: auto）

寬度

使用 w-* 類設定元素的寬度（.w-25、.w-50、.w-75、.w-100、.w-auto 和 .mw-100）

高度

使用 h-* 類設定元素的高度（.h-25、.h-50、.h-75、.h-100、.h-auto 和 .mh-100）

間距

Bootstrap 5 具有廣泛的響應式外邊距和內邊距實用類。它們適用於所有斷點：xs (<=576px)、sm (>=576px)、md (>=768px)、lg (>=992px)、xl (>=1200px) 或 xxl (>=1400px))

這些類的格式為：{property}{sides}-{size} 用於 xs，以及 {property}{sides}-{breakpoint}-{size} 用於 sm、md、lg、xl 和 xxl。

其中 property 是以下之一

• m - 設定 margin
• p - 設定 padding

其中 sides 是以下之一

• t - 設定 margin-top 或 padding-top
• b - 設定 margin-bottom 或 padding-bottom
• s - 設定 margin-left 或 padding-left
• e - 設定 margin-right 或 padding-right
• x - 同時設定 padding-left 和 padding-right 或 margin-left 和 margin-right
• y - 同時設定 padding-top 和 padding-bottom 或 margin-top 和 margin-bottom
• 空白 - 設定元素所有 4 個邊的 margin 或 padding

其中 size 是以下之一

• 0 - 將 margin 或 padding 設定為 0
• 1 - 將 margin 或 padding 設定為 .25rem
• 2 - 將 margin 或 padding 設定為 .5rem
• 3 - 將 margin 或 padding 設定為 1rem
• 4 - 將 margin 或 padding 設定為 1.5rem
• 5 - 將 margin 或 padding 設定為 3rem
• auto - 將 margin 設定為 auto

更多間距示例

陰影

使用 shadow- 類為元素新增陰影

垂直對齊

使用 align- 類更改元素的對齊方式（僅適用於內聯、內聯塊、內聯表格和表格單元格元素）

寬高比

根據父元素的寬度建立響應式影片或幻燈片。

將 .ratio 類和您選擇的寬高比 .ratio-* 新增到父元素，並將嵌入（影片或 iframe）新增到其中

可見性

使用 .visible 或 .invisible 類控制元素的可見性。注意：這些類不會改變 CSS display 值。它們只新增 visibility:visible 或 visibility:hidden

關閉圖示

使用 .btn-close 類樣式化關閉圖示。這通常用於警報和模態框。

螢幕閱讀器

使用 .visually-hidden 類隱藏所有裝置上的元素，螢幕閱讀器除外

顏色

如 顏色 章所述，這裡列出了所有文字和背景顏色類

文字顏色類包括：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body（預設正文字型顏色/通常為黑色）和 .text-light

上下文文字類也可以用於連結

你也可以為黑色或白色文字新增 50% 的不透明度，使用 .text-black-50 或 .text-white-50 類

背景顏色

背景顏色類包括：.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。

上面的 .bg-color 類不適用於文字，或者至少您必須指定一個適當的 .text-color 類才能為每個背景獲得正確的文字顏色。

但是，您可以使用 .text-bg-color 類，Bootstrap 將自動處理每個背景顏色對應的適當文字顏色