工具类库 Utilities

Bootstrap 5.3 的 Utilities（实用工具）是一套功能强大的 CSS 类集合，它们遵循单一职责原则，每个类只负责一个特定的样式属性。这些工具类可以快速应用常见样式，无需编写自定义CSS，大大提高了开发效率。

🛠️ API 概览

Bootstrap 的 Utilities 采用一致的命名模式，便于记忆和使用：

• 前缀模式：{property}{sides}-{size}
• 响应式设计：{property}{sides}-{breakpoint}-{size}
• 属性值：基于统一的间距和尺寸比例系统

🎨 背景（Background）

背景工具类用于快速设置元素的背景颜色和样式：

<!-- 背景颜色 -->
<div class="bg-primary">主要背景</div>
<div class="bg-success text-white">成功背景</div>
<div class="bg-gradient">渐变背景</div>

<!-- 背景透明度 -->
<div class="bg-success bg-opacity-25">25% 透明度的成功背景</div>
<div class="bg-primary bg-opacity-75">75% 透明度的主要背景</div>

🖼️ 边框（Borders）

边框工具类提供完整的边框控制能力：

<!-- 边框添加与移除 -->
<div class="border">全边框</div>
<div class="border-top">仅上边框</div>
<div class="border-0">无边框</div>

<!-- 边框颜色 -->
<div class="border border-primary">主要颜色边框</div>
<div class="border border-success">成功颜色边框</div>

<!-- 边框圆角 -->
<div class="rounded">小圆角</div>
<div class="rounded-pill">胶囊形状</div>
<div class="rounded-circle">圆形</div>

🌈 颜色（Colors）

颜色工具类基于 Bootstrap 的主题颜色系统：

<!-- 文本颜色 -->
<p class="text-primary">主要文本</p>
<p class="text-success">成功文本</p>
<p class="text-muted">减弱文本</p>

<!-- 链接颜色 -->
<a href="#" class="link-primary">主要链接</a>
<a href="#" class="link-danger">危险链接</a>

📦 显示（Display）

显示工具类控制元素的显示类型和可见性：

<!-- 显示类型 -->
<div class="d-inline">内联显示</div>
<div class="d-block">块级显示</div>
<div class="d-flex">弹性盒子</div>
<div class="d-none">完全隐藏</div>

<!-- 响应式显示 -->
<div class="d-none d-md-block">在中等屏幕以上显示</div>
<div class="d-block d-lg-none">在大屏幕隐藏</div>

<!-- 打印显示控制 -->
<div class="d-print-block">打印时显示</div>
<div class="d-none d-print-block">仅打印时显示</div>

🔄 弹性盒子（Flex）

Flex 工具类提供了强大的弹性布局控制：

<div class="d-flex flex-column flex-md-row gap-3">
  <!-- 方向控制 -->
  <div class="d-flex flex-row">水平排列</div>
  <div class="d-flex flex-column">垂直排列</div>

  <!-- 对齐方式 -->
  <div class="d-flex justify-content-center">水平居中</div>
  <div class="d-flex align-items-start">顶部对齐</div>

  <!-- 填充与包装 -->
  <div class="flex-fill">填充剩余空间</div>
  <div class="flex-wrap">允许换行</div>
</div>

🎯 浮动（Float）

浮动工具类用于创建文本环绕效果：

<div class="clearfix">
  <img src="image.jpg" class="float-start me-3" alt="...">
  <img src="image.jpg" class="float-end ms-3" alt="...">
  <p>文本内容将环绕浮动的图片...</p>
</div>

<!-- 响应式浮动 -->
<div class="float-sm-start">小屏幕左浮动</div>
<div class="float-md-end">中屏幕右浮动</div>

👆 交互（Interactions）

交互工具类控制用户与元素的交互方式：

<!-- 文本选择 -->
<p class="user-select-all">点击选中全部文本</p>
<p class="user-select-none">文本不可选中</p>
<p class="user-select-auto">默认选择行为</p>

<!-- 指针事件 -->
<button class="pe-none" tabindex="-1">不可点击按钮</button>
<div class="pe-auto">可点击区域</div>

🔗 链接（Link）

链接工具类专门用于链接样式的修饰：

<!-- 链接下划线 -->
<a href="#" class="link-underline">带下划线的链接</a>
<a href="#" class="link-underline-opacity-25">25%透明度的下划线</a>
<a href="#" class="link-underline-opacity-50">50%透明度的下划线</a>

<!-- 链接颜色与悬停效果 -->
<a href="#" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">
  自定义链接样式
</a>

🖼️ 对象适配（Object Fit）

对象适配工具类控制替换元素的内容适配：

<!-- 图片适配方式 -->
<img src="image.jpg" class="object-fit-contain" alt="保持比例完全包含">
<img src="image.jpg" class="object-fit-cover" alt="保持比例覆盖容器">
<img src="image.jpg" class="object-fit-fill" alt="拉伸填充容器">
<img src="image.jpg" class="object-fit-scale-down" alt="自动缩放">
<img src="image.jpg" class="object-fit-none" alt="原始尺寸">

⚫ 不透明度（Opacity）

不透明度工具类控制元素的透明度：

<div class="opacity-100">完全不透明</div>
<div class="opacity-75">75% 不透明</div>
<div class="opacity-50">半透明</div>
<div class="opacity-25">25% 不透明</div>
<div class="opacity-0">完全透明</div>

📊 溢出（Overflow）

溢出工具类控制元素内容的溢出行为：

<div class="overflow-auto">自动显示滚动条</div>
<div class="overflow-hidden">隐藏溢出内容</div>
<div class="overflow-visible">显示所有内容</div>
<div class="overflow-scroll">总是显示滚动条</div>

<!-- 方向性溢出控制 -->
<div class="overflow-x-auto">水平自动滚动</div>
<div class="overflow-y-hidden">垂直隐藏溢出</div>

📍 定位（Position）

定位工具类提供完整的定位控制：

<!-- 定位类型 -->
<div class="position-static">静态定位</div>
<div class="position-relative">相对定位</div>
<div class="position-absolute">绝对定位</div>
<div class="position-fixed">固定定位</div>
<div class="position-sticky">粘性定位</div>

<!-- 位置调整 -->
<div class="top-0">顶部对齐</div>
<div class="start-50">左侧50%</div>
<div class="translate-middle">居中变换</div>

🌓 阴影（Shadows）

阴影工具类为元素添加深度效果：

<div class="shadow-none">无阴影</div>
<div class="shadow-sm">小阴影</div>
<div class="shadow">常规阴影</div>
<div class="shadow-lg">大阴影</div>

📏 尺寸（Sizing）

尺寸工具类控制元素的宽度和高度：

<!-- 宽度 -->
<div class="w-25">25% 宽度</div>
<div class="w-50">50% 宽度</div>
<div class="w-75">75% 宽度</div>
<div class="w-100">100% 宽度</div>
<div class="w-auto">自动宽度</div>

<!-- 高度 -->
<div class="h-25">25% 高度</div>
<div class="h-50">50% 高度</div>
<div class="h-75">75% 高度</div>
<div class="h-100">100% 高度</div>
<div class="h-auto">自动高度</div>

<!-- 视口单位 -->
<div class="vw-100">100% 视口宽度</div>
<div class="vh-100">100% 视口高度</div>

📐 间距（Spacing）

间距工具类是 Bootstrap 中最常用的工具之一：

<!-- 外边距 -->
<div class="m-0">无外边距</div>
<div class="m-3">中等外边距</div>
<div class="mt-2">上外边距</div>
<div class="mx-auto">水平自动外边距（居中）</div>

<!-- 内边距 -->
<div class="p-0">无内边距</div>
<div class="p-4">大内边距</div>
<div class="px-3">水平内边距</div>
<div class="py-2">垂直内边距</div>

<!-- 响应式间距 -->
<div class="m-3 m-md-4 m-lg-5">响应式外边距</div>

📝 文本（Text）

文本工具类提供全面的文本样式控制：

<!-- 对齐 -->
<p class="text-start">左对齐</p>
<p class="text-center">居中对齐</p>
<p class="text-end">右对齐</p>

<!-- 换行与溢出 -->
<p class="text-wrap">允许换行</p>
<p class="text-nowrap">禁止换行</p>
<p class="text-truncate">溢出显示省略号</p>

<!-- 字重与样式 -->
<p class="fw-bold">粗体</p>
<p class="fst-italic">斜体</p>
<p class="text-decoration-underline">下划线</p>

<!-- 大小写转换 -->
<p class="text-lowercase">小写文本</p>
<p class="text-uppercase">大写文本</p>
<p class="text-capitalize">首字母大写</p>

<!-- 字体大小 -->
<p class="fs-1">特大字体</p>
<p class="fs-6">小字体</p>

📐 垂直对齐（Vertical Align）

垂直对齐工具类控制行内或表格单元格的垂直对齐：

<span class="align-baseline">基线对齐</span>
<span class="align-top">顶部对齐</span>
<span class="align-middle">中间对齐</span>
<span class="align-bottom">底部对齐</span>
<span class="align-text-top">文本顶部对齐</span>
<span class="align-text-bottom">文本底部对齐</span>

<!-- 表格单元格对齐 -->
<td class="align-middle">中间对齐的表格单元格</td>

👀 可见性（Visibility）

可见性工具类控制元素的可见性：

<div class="visible">可见元素</div>
<div class="invisible">不可见但占据空间</div>

🎯 Z-index

Z-index 工具类控制元素的堆叠顺序：

<div class="z-0">底层</div>
<div class="z-1">第一层</div>
<div class="z-2">第二层</div>
<div class="z-3">第三层</div>
<div class="z-n1">负一层</div>

实用技巧与最佳实践

响应式设计

所有工具类都支持响应式断点：

<div class="text-center text-md-start text-lg-center">
  在不同屏幕尺寸下的对齐方式
</div>

工具类组合

<button class="btn btn-primary p-3 m-2 border border-3 rounded-pill shadow">
  组合多个工具类的按钮
</button>

自定义工具类

通过 Sass 变量可以自定义工具类：

// 自定义间距
$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  6: $spacer * 4
);

// 自定义颜色
$utilities: (
  "background-color": (
    property: background-color,
    class: bg,
    values: map-merge($theme-colors, ("custom-color": #ff6b6b))
  )
);

总结

Bootstrap 5.3 的 Utilities 提供了一套完整、一致且强大的工具类系统，涵盖了开发中绝大多数常见的样式需求。通过合理组合这些工具类，开发者可以快速构建出美观、响应式的界面，而无需编写大量自定义CSS代码。这些工具类的设计遵循了实用优先的原则，是 Bootstrap 框架高效开发理念的核心体现。