bootstrap-utilities

用途

Bootstrap Utilities 是 Bootstrap 5.3 内置的实用工具类（utility classes）体系，目标是在不编写自定义 CSS 的前提下，通过组合类名快速完成常见样式调整。这些类由 Sass 的 Utilities API 生成，因此可以按需定制、扩展或移除。

主要能力

间距工具

提供 margin（m-）与 padding（p-）类，覆盖全部边以及单边（t、b、s、e、x、y）。间距刻度为：0、1（0.25rem/4px）、2（0.5rem/8px）、3（1rem/16px）、4（1.5rem/24px）、5（3rem/48px），margin 额外支持 auto。支持响应式写法，例如 mt-0 mt-md-3 mt-lg-5。

Gap 工具用于 Flexbox 与 Grid，例如 d-flex gap-3、d-grid gap-2，并支持 row-gap-* 与 column-gap-*。

显示工具

d-* 类控制 display 值，包括 none、inline、inline-block、block、flex、inline-flex、grid、table、table-row、table-cell 等。支持响应式（如 d-none d-md-block）与打印（如 d-print-none、d-none d-print-block）。

文本工具

对齐：text-start、text-center、text-end，支持响应式。
大小写转换：text-lowercase、text-uppercase、text-capitalize。
装饰：text-decoration-none、text-decoration-underline、text-decoration-line-through。
换行与溢出：text-wrap、text-nowrap、text-break、text-truncate。
字重与样式：fw-bold、fw-bolder、fw-semibold、fw-medium、fw-normal、fw-light、fw-lighter、fst-italic、fst-normal。
行高：lh-1、lh-sm、lh-base、lh-lg。

Flexbox 工具

覆盖方向（flex-row、flex-row-reverse、flex-column、flex-column-reverse）、主轴对齐（justify-content-*）、交叉轴对齐（align-items-*）、自身对齐（align-self-*）、换行（flex-wrap、flex-nowrap、flex-wrap-reverse）、伸缩（flex-grow-*、flex-shrink-*、flex-fill）以及顺序（order-*、order-first、order-last）。

背景与文字颜色

背景类包括 bg-primary、bg-secondary、bg-success、bg-danger、bg-warning、bg-info、bg-light、bg-dark、bg-body、bg-body-secondary、bg-body-tertiary、bg-white、bg-black、bg-transparent，并支持 bg-opacity-* 与 bg-gradient。

文字颜色类包括 text-primary、text-secondary、text-success、text-danger、text-warning、text-info、text-muted、text-body、text-body-secondary、text-body-tertiary、text-body-emphasis、text-black、text-white，并支持 text-opacity-*。

边框、阴影与尺寸

边框支持添加/移除各边、颜色、宽度（1–5）与圆角（rounded、rounded-0 至 rounded-5、rounded-circle、rounded-pill 及单边圆角）。阴影提供 shadow-none、shadow-sm、shadow、shadow-lg。尺寸提供宽度（w-25 至 w-100、w-auto、mw-100、vw-100、min-vw-100）与高度（h-25 至 h-100、h-auto、mh-100、vh-100、min-vh-100）。

定位、溢出与其它

定位支持 position-static/relative/absolute/fixed/sticky，边角定位（top-0、start-0、end-0、bottom-0、top-50、start-50）以及 translate-middle、translate-middle-x、translate-middle-y。溢出支持 overflow-auto/hidden/visible/scroll 及 x/y 方向变体。此外还有透明度（opacity-*）、可见性（visible、invisible）、z-index（z-n1 至 z-3）、对象适配（object-fit-*）、交互（user-select-*、pe-none、pe-auto）、浮动（float-start/end/none 及响应式）、垂直对齐（align-baseline/top/middle/bottom/text-top/text-bottom）和链接工具（link-opacity-*、link-underline-*、link-offset-*，Bootstrap 5.3 新增）。

使用方式

直接在 HTML 元素的 class 属性中组合工具类即可，例如：

<div class="d-flex justify-content-center align-items-center min-vh-100">
  <div class="text-center">
    <h1>Perfectly Centered</h1>
    <p>Both horizontally and vertically</p>
  </div>
</div>

响应式类遵循 {类}-{断点}-{值} 格式，打印类使用 print 断点。

自定义（Utilities API）

工具类通过 Sass 的 Utilities API 生成，每个工具是一个 map，可配置 property、values、class、responsive、print、state、css-var、css-variable-name、local-vars、rfs、rtl 等选项。默认所有工具类带 !important，可通过 $enable-important-utilities: false 全局关闭。

添加自定义工具示例：

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab grabbing not-allowed
    )
  )
);

@import "bootstrap/scss/utilities/api";

修改现有工具（如为 overflow 添加响应式变体）：

$utilities: map-merge(
  $utilities,
  (
    "overflow": map-merge(
      map-get($utilities, "overflow"),
      (responsive: true)
    )
  )
);

移除工具：

$utilities: map-remove($utilities, "float");
// 或
$utilities: map-merge($utilities, ("float": null));

适用场景

快速原型与页面布局调整。
响应式显示/隐藏、间距与对齐控制。
使用 Flexbox 或 Grid 进行布局组合。
通过 Utilities API 定制项目专属工具类。

限制

工具类默认带 !important，可能影响样式覆盖优先级。
垂直对齐工具仅适用于 inline、inline-block、inline-table 与表格单元格，块级元素应使用 Flexbox 的 align-items-*。
浮动工具在现代布局中通常被 Flexbox/Grid 取代，主要用于文本环绕图片。
自定义与移除工具需要 Sass 编译环境。
关于收费、价格、平台支持等具体信息，资料中暂未提供。