實(shí)用工具

Utilities / Helper 類(lèi)

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

邊框

使用邊框類(lèi)為元素添加或刪除邊框：

實(shí)例

<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>

邊框?qū)挾?/h2>

使用 .border-1 到 .border-5 來(lái)改變邊框的寬度：

實(shí)例

<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>

邊框顏色

使用任意上下文邊框顏色類(lèi)向邊框添加顏色：

實(shí)例

<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 類(lèi)為元素添加圓角：

實(shí)例

<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>

浮動(dòng)和清除浮動(dòng)

使用 .float-end 類(lèi)向右浮動(dòng)元素，或使用 .float-start 向左浮動(dòng)，并使用 .clearfix 類(lèi)清除浮動(dòng)：

實(shí)例

<div class="clearfix">
  <span class="float-start">向左浮動(dòng)</span>
  <span class="float-end">向右浮動(dòng)</span>
</div>

響應(yīng)式浮動(dòng)

根據(jù)屏幕寬度向左或向右浮動(dòng)元素，使用響應(yīng)式浮動(dòng)類(lèi) (.float-*-left|right)，其中 * 是：

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

實(shí)例

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

居中對(duì)齊

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

實(shí)例

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

寬度

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

實(shí)例

<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">自動(dòng)寬度</div>
<div class="mw-100 bg-warning">最大寬度 100%</div>

高度

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

實(shí)例

<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">自動(dòng)高度</div>
  <div class="mh-100 bg-warning" style="height:500px">最大高度 100%</div>
</div>

間距

Bootstrap 5 擁有廣泛的響應(yīng)式 margin 和 padding 實(shí)用程序類(lèi)。它們適用于所有斷點(diǎn)：

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

這些類(lèi)的使用格式為：{property}{sides}-{size} 用于 xs，以及 {property}{sides}-{breakpoint}-{size} 用于 sm、md、lg、xl 和 xxl。

property 是以下之一：

• m - 設(shè)置 margin
• p - 設(shè)置 padding

sides 是以下之一：

• t - 設(shè)置 margin-top 或 padding-top
• b - 設(shè)置 margin-bottom 或 padding-bottom
• s - 設(shè)置 margin-left 或 padding-left
• e - 設(shè)置 margin-right 或 padding-right
• x - 同時(shí)設(shè)置 padding-left 和 padding-right 或 margin-left 和 margin-right
• y - 同時(shí)設(shè)置 padding-top 和 padding-bottom 或 margin-top 和 margin-bottom
• blank - 在元素的所有四個(gè)邊設(shè)置 margin 或 padding

size 是以下之一：

• 0 - 把 margin 或 padding 設(shè)置為 0
• 1 - 把 margin 或 padding 設(shè)置為 .25rem
• 2 - 把 margin 或 padding 設(shè)置為 .5rem
• 3 - 把 margin 或 padding 設(shè)置為 1rem
• 4 - 把 margin 或 padding 設(shè)置為 1.5rem
• 5 - 把 margin 或 padding 設(shè)置為 3rem
• auto - 把 margin 設(shè)置為 auto

實(shí)例

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

更多間距實(shí)例

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

您可以在我們的 CSS 單位參考手冊(cè) 中閱讀有關(guān) rem 和不同尺寸單位的更多內(nèi)容。

陰影

請(qǐng)使用 shadow- 類(lèi)為元素添加陰影：

實(shí)例

<div class="shadow-none p-4 mb-4 bg-light">沒(méi)有陰影</div>
<div class="shadow-sm p-4 mb-4 bg-white">小型陰影</div>
<div class="shadow p-4 mb-4 bg-white">默認(rèn)陰影</div>
<div class="shadow-lg p-4 mb-4 bg-white">大型陰影</div>

垂直對(duì)齊

請(qǐng)使用 align- 類(lèi)更改元素的對(duì)齊方式（僅適用于 inline、 inline-block、inline-table 和表格單元格元素）：

實(shí)例

<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>

縱橫比

根據(jù)父級(jí)的寬度創(chuàng)建響應(yīng)式視頻或幻燈片。

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

實(shí)例

<!-- 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>

可見(jiàn)性

使用 .visible 或 .invisible 類(lèi)可控制元素的可見(jiàn)性：

注釋?zhuān)?/span>這些類(lèi)不會(huì)更改 CSS display 值。它們只添加 visibility:visible 或 visibility:hidden。

實(shí)例

<div class="visible">我是可見(jiàn)的。</div>
<div class="invisible">我是不可見(jiàn)的。</div>

關(guān)閉圖標(biāo)

使用 .btn-close 類(lèi)可設(shè)置關(guān)閉圖標(biāo)的樣式。通常用于警告框和模態(tài)。

實(shí)例

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

屏幕閱讀器

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

實(shí)例

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

顏色

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

針對(duì)文本顏色的類(lèi)是：

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

實(shí)例

上下文文本類(lèi)也可用于鏈接：

實(shí)例

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

實(shí)例

背景色

針對(duì)背景顏色的類(lèi)是：

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

請(qǐng)注意，背景顏色不會(huì)設(shè)置文本顏色，因此在某些情況下，您需要將它們與 .text-* 類(lèi)一起使用。

實(shí)例