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

上下文文本类也可以用于链接

您还可以使用 .text-black-50 或 .text-white-50 类为黑色或白色文本添加 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 将自动处理每个背景颜色的适当文本颜色