实用工具

Utilities / Helper 类

Bootstrap 5 有很多 utility/helper 类，可以在不使用任何 CSS 代码的情况下快速设置元素样式。

边框

使用边框类为元素添加或删除边框：

实例

边框宽度

使用 .border-1 到 .border-5 来改变边框的宽度：

实例

边框颜色

使用任意上下文边框颜色类向边框添加颜色：

实例

边框圆角

使用 rounded 类为元素添加圆角：

实例

浮动和清除浮动

使用 .float-end 类向右浮动元素，或使用 .float-start 向左浮动，并使用 .clearfix 类清除浮动：

实例

  向左浮动
  向右浮动

响应式浮动

根据屏幕宽度向左或向右浮动元素，使用响应式浮动类 (.float-*-left|right)，其中 * 是：

• 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、.mw-auto、.mw-100）设置元素的宽度：

实例

宽度 25%
宽度 50%
宽度 75%
宽度 100%
自动宽度
最大宽度 100%

高度

使用 h-* 类（.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100）设置元素的高度：

实例

  
高度 25%
  
高度 50%
  
高度 75%
  
高度 100%
  
自动高度
  
最大高度 100%

间距

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

实例

我只有上内边距 (1.5rem)
我在所有边都有内边距 (3rem)
我在所有边都有外边距 (3rem) 和下内边距 (3rem)

更多间距实例

您可以在我们的 CSS 单位参考手册 中阅读有关 rem 和不同尺寸单位的更多内容。

阴影

请使用 shadow- 类为元素添加阴影：

实例

没有阴影
小型阴影
默认阴影
大型阴影

垂直对齐

请使用 align- 类更改元素的对齐方式（仅适用于 inline、 inline-block、inline-table 和表格单元格元素）：

实例

baseline
top
middle
bottom
text-top
text-bottom

纵横比

根据父级的宽度创建响应式视频或幻灯片。

将 .ratio 类与您选择的纵横比 .aspect-ratio-* 添加到父元素，并在其中添加嵌入（视频或 iframe）：

实例

可见性

使用 .visible 或 .invisible 类可控制元素的可见性：

注释：这些类不会更改 CSS display 值。它们只添加 visibility:visible 或 visibility:hidden。

实例

我是可见的。
我是不可见的。

关闭图标

使用 .btn-close 类可设置关闭图标的样式。通常用于警告框和模态。

实例

屏幕阅读器

使用 .visually-hidden 类可在所有设备上隐藏元素，屏幕阅读器除外：

实例

I will be hidden on all screens except for screen readers.

颜色

如“颜色”一章所述，下面列出了所有文本和背景颜色类的列表：

针对文本颜色的类是：

• .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-* 类一起使用。

实例