Bootstrap5 小工具

Bootstrap 5 提供了很多有用的类来帮组我们快速实现效果，不需要重复写一些 CSS 代码。

---

背景颜色

设置不同元素的背景颜色时，需要通过 .text-* 类来设置匹配的文本颜色：

.bg-gradient 类可以设置背景颜色渐变的效果：

---

边框

我们可以使用 border 相关类根据需要显示边框：

.border-1 到 .border-5 类用于设置边框线条的宽度：

以下设置了边框的不同颜色：

rounded 相关类用于设置圆角：

rounded-0 到 rounded-3 类用于设置圆角的大小：

---

浮动与清除浮动

元素向右浮动使用 .float-end 类，向左浮动使用 .float-start 类， .clearfix 类用于清除浮动:

也可以根据屏幕尺寸来设置浮动效果(.float-*-left|right - * 表示 sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) or xxl (>=1400px)):

---

居中对齐

使用 .mx-auto 类来设置元素居中对齐 (添加 margin-left 和 margin-right 为 auto):

---

宽度与高度

宽度使用 w-* (.w-25, .w-50, .w-75, .w-100, .mw-auto, .mw-100) 类来设置。

高度使用 h-* (.h-25, .h-50, .h-75, .h-100, .mh-auto, .mh-100) 类来设置。

---

间距

间距设置语法如下:

{property}{sides}-{size}  // 适用 xs(<=576px)
{property}{sides}-{breakpoint}-{size} // 适用 sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) 或 xxl (>=1400px)

breakpoints 指的是屏幕宽度: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) 或 xxl (>=1400px)。

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 - 用来设置 *-left 和 *-right
• y - 用来设置 *-top 和 *-bottom
• blank - 用来设置元素在四个方向的 margin 或 padding

size 指的是边距的大小：

• 0 - 设置 margin 或 padding 为 0
• 1 - 设置 margin 或 padding 为 $spacer * .25
• 2 - 设置 margin 或 padding 为 $spacer * .5
• 3 - 设置 margin 或 padding 为 $spacer
• 4 - 设置margin 或 padding 为 $spacer * 1.5
• 5 - 设置 margin 或 padding 为 $spacer * 3
• auto - 设置 margin 为 auto

看下部分边距的源码设置：

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

更多实例

.m-# / m-*-#	设置所有边的外边距	尝试一下
.mt-# / mt-*-#	margin top	尝试一下
.mb-# / mb-*-#	margin bottom	尝试一下
.ms-# / ms-*-#	margin left	尝试一下
.me-# / me-*-#	margin right	尝试一下
.mx-# / mx-*-#	margin left 与 right	尝试一下
.my-# / my-*-#	margin top 与 bottom	尝试一下
.p-# / p-*-#	使用边设置 padding	尝试一下
.pt-# / pt-*-#	padding top	尝试一下
.pb-# / pb-*-#	padding bottom	尝试一下
.ps-# / ps-*-#	padding left	尝试一下
.pe-# / pe-*-#	padding right	尝试一下
.py-# / py-*-#	padding top 与 bottom	尝试一下
.px-# / px-*-#	padding left 与 right	尝试一下