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

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

你也可以为黑色或白色文本添加 50% 的不透明度，使用 .text-black-50 或 .text-white-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 将自动处理每个背景颜色对应的适当文本颜色