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-* 类一起使用。
实例
亲自试一试
BS5 Offcanvas
BS5 Flex
JavaScript 测验 |
发表于 2022-7-4 10:25
|