Bootstrap 5 實用工具

Utilities / Helper 類

Bootstrap 5 有很多 utility/helper 類，可以在不使用任何 CSS 代碼的情況下快速設置元素樣式。

邊框

使用邊框類為元素添加或刪除邊框：

實例

<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

親自試一試

邊框寬度

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

實例

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

親自試一試

邊框顏色

使用任意上下文邊框顏色類向邊框添加顏色：

實例

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

親自試一試

邊框圓角

使用 rounded 類為元素添加圓角：

實例

<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>

親自試一試

浮動和清除浮動

使用 .float-end 類向右浮動元素，或使用 .float-start 向左浮動，并使用 .clearfix 類清除浮動：

實例

<div class="clearfix">
  <span class="float-start">向左浮動</span>
  <span class="float-end">向右浮動</span>
</div>

親自試一試

響應式浮動

根據屏幕寬度向左或向右浮動元素，使用響應式浮動類 (.float-*-left|right)，其中 * 是：

  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

實例

<div class="float-sm-end">在小型屏幕或更寬的屏幕上向右浮動</div><br>
<div class="float-md-end">在中型屏幕或更寬的屏幕上向右浮動</div><br>
<div class="float-lg-end">在大型屏幕或更寬的屏幕上向右浮動</div><br>
<div class="float-xl-end">在超大型屏幕或更寬的屏幕上向右浮動</div><br>
<div class="float-xxl-end">在特大型屏幕或更寬的屏幕上向右浮動</div><br>
<div class="float-none">不進行浮動</div>

親自試一試

居中對齊

使用 .mx-auto 類居中元素（添加 margin-left 和 margin-right: auto）：

實例

<div class="mx-auto bg-warning" style="width:150px">居中</div>

親自試一試

寬度

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

實例

<div class="w-25 bg-warning">寬度 25%</div>
<div class="w-50 bg-warning">寬度 50%</div>
<div class="w-75 bg-warning">寬度 75%</div>
<div class="w-100 bg-warning">寬度 100%</div>
<div class="w-auto bg-warning">自動寬度</div>
<div class="mw-100 bg-warning">最大寬度 100%</div>

親自試一試

高度

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

實例

<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">高度 25%</div>
  <div class="h-50 bg-warning">高度 50%</div>
  <div class="h-75 bg-warning">高度 75%</div>
  <div class="h-100 bg-warning">高度 100%</div>
  <div class="h-auto bg-warning">自動高度</div>
  <div class="mh-100 bg-warning" style="height:500px">最大高度 100%</div>
</div>

親自試一試

間距

Bootstrap 5 擁有廣泛的響應式 margin 和 padding 實用程序類。它們適用于所有斷點：

  • 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
  • blank - 在元素的所有四個邊設置 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

實例

<div class="pt-4 bg-warning">我只有上內邊距 (1.5rem)</div>
<div class="p-5 bg-success">我在所有邊都有內邊距 (3rem)</div>
<div class="m-5 pb-5 bg-info">我在所有邊都有外邊距 (3rem) 和下內邊距 (3rem)</div>

親自試一試

更多間距實例

.m-# / m-*-# 所有邊的外邊距 試一試
.mt-# / mt-*-# 上外邊距 試一試
.mb-# / mb-*-# 下外邊距 試一試
.ms-# / ms-*-# 左外邊距 試一試
.me-# / me-*-# 右外邊距 試一試
.mx-# / mx-*-# 左和右內邊距 試一試
.my-# / my-*-# 上和下外邊距 試一試
.p-# / p-*-# 所有邊的內邊距（填充） 試一試
.pt-# / pt-*-# 上內邊距 試一試
.pb-# / pb-*-# 下內邊距 試一試
.ps-# / ps-*-# 左內邊距 試一試
.pe-# / pe-*-# 右內邊距 試一試
.py-# / py-*-# 上和下內邊距 試一試
.px-# / px-*-# 左和右內邊距 試一試

您可以在我們的 CSS 單位參考手冊 中閱讀有關 rem 和不同尺寸單位的更多內容。

陰影

請使用 shadow- 類為元素添加陰影：

實例

<div class="shadow-none p-4 mb-4 bg-light">沒有陰影</div>
<div class="shadow-sm p-4 mb-4 bg-white">小型陰影</div>
<div class="shadow p-4 mb-4 bg-white">默認陰影</div>
<div class="shadow-lg p-4 mb-4 bg-white">大型陰影</div>

親自試一試

垂直對齊

請使用 align- 類更改元素的對齊方式（僅適用于 inline、 inline-block、inline-table 和表格單元格元素）：

實例

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

親自試一試

縱橫比

根據父級的寬度創建響應式視頻或幻燈片。

將 .ratio 類與您選擇的縱橫比 .aspect-ratio-* 添加到父元素，并在其中添加嵌入（視頻或 iframe）：

實例

<!-- Aspect ratio 1:1 -->
<div class="ratio ratio-1x1">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 4:3 -->
<div class="ratio ratio-4x3">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 16:9 -->
<div class="ratio ratio-16x9">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 21:9 -->
<div class="ratio ratio-21x9">
  <iframe src="shanghai.mp4"></iframe>
</div>

親自試一試

可見性

使用 .visible 或 .invisible 類可控制元素的可見性：

注釋：這些類不會更改 CSS display 值。它們只添加 visibility:visible 或 visibility:hidden。

實例

<div class="visible">我是可見的。</div>
<div class="invisible">我是不可見的。</div>

親自試一試

關閉圖標

使用 .btn-close 類可設置關閉圖標的樣式。通常用于警告框和模態。

實例

<button type="button" class="btn-close"></button>

親自試一試

屏幕閱讀器

使用 .visually-hidden 類可在所有設備上隱藏元素，屏幕閱讀器除外：

實例

<span class="visually-hidden">I will be hidden on all screens except for screen readers.</span>

親自試一試

顏色

如“顏色”一章所述，下面列出了所有文本和背景顏色類的列表：

針對文本顏色的類是：

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark
  • .text-body（默認 body 顏色/通常為黑色）
  • .text-light

實例

親自試一試

上下文文本類也可用于鏈接：

實例

親自試一試

您還可以使用 .text-black-50 或 .text-white-50 類為黑色或白色文本添加 50% 的不透明度：

實例

親自試一試

背景色

針對背景顏色的類是：

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

請注意，背景顏色不會設置文本顏色，因此在某些情況下，您需要將它們與 .text-* 類一起使用。

實例

親自試一試