Bootstrap5 实用程序
实用程序/辅助类
Bootstrap 5 有很多实用程序/帮助程序类，可以快速设置元素样式，而无需使用任何 CSS 代码。
边框
使用border用于添加或删除元素边框的类：
示例
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-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>
<span class="rounded-4"></span>
<span class="rounded-5"></span>
亲自试一试 »
浮动和 Clearfix
使用 使元素向右浮动.float-end类或向左.float-start，并清除浮动.clearfix类：
示例
<div class="clearfix">
<span class="float-start">Float left</span>
<span class="float-end">Float right</span>
</div>
亲自试一试 »
响应式浮动
使用响应式浮动类 (.float-*-start|end- 哪里sm(>=576 像素),md(>=768 像素),lg(>=992 像素),xl(>=1200px) 或xxl(>=1400px)):
示例
<div class="float-sm-end">Float right on small screens or wider</div><br>
<div class="float-md-end">Float right on medium screens or wider</div><br>
<div class="float-lg-end">Float right on large screens or wider</div><br>
<div class="float-xl-end">Float right on extra large screens or wider</div><br>
<div class="float-xxl-end">Float right on XXL screens or wider</div><br>
<div class="float-none">Float none</div>
亲自试一试 »
中心对齐
将元素居中.mx-auto类（添加 margin-left 和 margin-right: auto）：
宽度
使用 w-* 类设置元素的宽度 (.w-25,.w-50,.w-75,.w-100,.mw-auto,.mw-100）：
示例
<div class="w-25 bg-warning">Width 25%</div>
<div class="w-50 bg-warning">Width 50%</div>
<div class="w-75 bg-warning">Width 75%</div>
<div class="w-100 bg-warning">Width 100%</div>
<div class="w-auto bg-warning">Auto Width</div>
<div class="mw-100 bg-warning">Max Width 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">Height 25%</div>
<div class="h-50 bg-warning">Height 50%</div>
<div class="h-75 bg-warning">Height 75%</div>
<div class="h-100 bg-warning">Height 100%</div>
<div class="h-auto bg-warning">Auto Height</div>
<div class="mh-100 bg-warning" style="height:500px">Max Height 100%</div>
</div>
亲自试一试 »
间距
Bootstrap 5 具有广泛的响应式边距和填充实用程序类。它们适用于所有断点：xs(<=576 像素),sm(>=576 像素),md(>=768 像素),lg(>=992 像素),xl(>=1200px) 或xxl(>=1400px)):
这些类的使用格式如下：{property}{sides}-{size}为了xs和{property}{sides}-{breakpoint}-{size}为了sm,md,lg,xl和xxl。
在哪里属性是其中之一：
m- 套marginp- 套padding
在哪里侧面是其中之一：
t- 套margin-top或者padding-topb- 套margin-bottom或者padding-bottoms- 套margin-left或者padding-lefte- 套margin-right或者padding-rightx- 设置两者padding-left和padding-right或者margin-left和margin-righty- 设置两者padding-top和padding-bottom或者margin-top和margin-bottom- 空白 - 设置 a
margin或者padding在元素的所有 4 个面上
在哪里尺寸是其中之一：
0- 套margin或者padding到01- 套margin或者padding到.25rem2- 套margin或者padding到.5rem3- 套margin或者padding到1rem4- 套margin或者padding到1.5rem5- 套margin或者padding到3remauto- 套margin自动
示例
<div class="pt-4 bg-warning">I only have a top padding (1.5rem)</div>
<div class="p-5 bg-success">I have a padding on all sides (3rem)</div>
<div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem) and a bottom padding (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-*-# |
左右填充 | 尝试一下 |
您可以阅读更多有关rem以及我们的不同尺寸单位CSS 单位参考。
阴影
使用shadow-向元素添加阴影的类：
示例
<div class="shadow-none p-4 mb-4 bg-light">No shadow</div>
<div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div>
<div class="shadow p-4 mb-4 bg-white">Default shadow</div>
<div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>
亲自试一试 »
垂直对齐
使用align-更改元素对齐方式的类（仅适用于内联、内联块、内联表和表格单元格元素）：
示例
<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类以及您选择的纵横比.ratio-*到父元素，并在其中添加嵌入（视频或 iframe）：
示例
<!-- Aspect ratio 1:1 -->
<div class="ratio ratio-1x1">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<!-- Aspect ratio 4:3 -->
<div class="ratio ratio-4x3">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<!-- Aspect ratio 16:9 -->
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<!-- Aspect ratio 21:9 -->
<div class="ratio ratio-21x9">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
亲自试一试 »
能见度
使用.visible或者.invisible类来控制元素的可见性。笔记：这些类不会更改 CSS 显示值。他们只添加visibility:visible或者visibility:hidden:
示例
<div class="visible">I am visible</div>
<div class="invisible">I am invisible</div>
亲自试一试 »
关闭图标
使用.btn-close类来设置关闭图标的样式。这通常用于警报和模式。
屏幕阅读器
使用.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（默认机身颜色/通常为黑色）和.text-light:
示例
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary text.
Dark grey text.
Body text.
Light grey text.
上下文文本类也可以用在链接上：
示例
您还可以使用以下命令为黑色或白色文本添加 50% 的不透明度.text-black-50或者.text-white-50课程：
示例
Black text with 50% opacity on white background
White text with 50% opacity on black background
背景颜色
背景颜色的类别有：.bg-primary, .bg-success,.bg-info,.bg-warning,.bg-danger,.bg-secondary,.bg-dark和.bg-light。
这个.bg-color上面的类不能很好地处理文本，或者至少你必须指定一个正确的.text-color类为每个背景获取正确的文本颜色。
但是，您可以使用.text-bg-color类和 Bootstrap 将自动处理每种背景颜色的适当文本颜色：
示例
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary background color.
Dark grey background color.
Light grey background color.