在 Bootstrap 5 中，小工具（Utilities） 提供了许多常用的工具类，用于帮助你快速调整布局、样式和组件的行为，而无需编写自定义 CSS。Bootstrap 提供了多种小工具类，涵盖了对文本、背景、边距、填充、排版等方面的控制。

以下是一些常见的小工具类以及它们的使用方法：

1. Spacing 工具（间距工具）

Bootstrap 5 提供了简单的间距工具类，用于调整元素的 margin 和 padding。这些工具类支持上下左右、水平垂直的间距设置。

示例：设置 margin 和 padding

<div class="m-3">Margin 3</div> <!-- 设置所有边的 margin 为 1rem -->
<div class="mt-5">Margin Top 5</div> <!-- 设置上边距为 3rem -->
<div class="px-4">Padding X 4</div> <!-- 设置左右的填充为 1.5rem -->
<div class="py-2">Padding Y 2</div> <!-- 设置上下的填充为 0.5rem -->
  • m-3：所有边的 margin 为 1rem。
  • mt-5：上边距（margin-top）为 3rem。
  • px-4：左右填充（padding-left 和 padding-right）为 1.5rem。
  • py-2：上下填充（padding-top 和 padding-bottom）为 0.5rem。

2. 文本对齐

你可以使用以下类来控制文本的对齐方式。

示例：文本对齐

<div class="text-start">Left aligned text</div>
<div class="text-center">Center aligned text</div>
<div class="text-end">Right aligned text</div>
  • text-start：左对齐文本。
  • text-center：居中对齐文本。
  • text-end：右对齐文本。

3. 显示和隐藏

Bootstrap 5 提供了多种显示和隐藏元素的类，特别是响应式设计时非常有用。

示例：显示和隐藏

<div class="d-block">Block Element</div> <!-- 显示为块级元素 -->
<div class="d-none d-sm-block">Hidden on small screens</div> <!-- 小屏幕上隐藏 -->
<div class="d-none d-lg-block">Visible on large screens</div> <!-- 只在大屏幕上显示 -->
  • d-none：隐藏元素。
  • d-sm-block：在小屏幕及以上显示为块级元素。
  • d-lg-block：在大屏幕及以上显示为块级元素。

4. 文本颜色和背景颜色

你可以使用工具类来快速设置文本颜色和背景颜色。

示例：文本颜色和背景颜色

<div class="text-primary">Primary text color</div> <!-- 设置文本颜色为 Bootstrap primary 色 -->
<div class="bg-success text-white">Success background with white text</div> <!-- 设置背景为绿色，文本为白色 -->
<div class="text-muted">Muted text</div> <!-- 设置文本颜色为 muted -->
  • text-primary：将文本颜色设置为主题的 primary 色。
  • bg-success：将背景颜色设置为 success（绿色）。
  • text-muted：将文本颜色设置为 muted（灰色）。

5. 浮动元素

Bootstrap 5 提供了一个简单的工具类来控制元素的浮动方向。

示例：浮动元素

<div class="float-start">Float Left</div> <!-- 浮动到左侧 -->
<div class="float-end">Float Right</div> <!-- 浮动到右侧 -->
<div class="clearfix"></div> <!-- 清除浮动 -->
  • float-start：将元素浮动到左侧。
  • float-end：将元素浮动到右侧。
  • clearfix：清除浮动，确保父容器高度计算正确。

6. 字体大小

Bootstrap 5 允许你使用工具类设置字体大小。

示例：设置字体大小

<p class="fs-1">Font Size 1</p> <!-- 最大字体 -->
<p class="fs-3">Font Size 3</p> <!-- 较大的字体 -->
<p class="fs-6">Font Size 6</p> <!-- 最小字体 -->
  • fs-1：最大字体大小。
  • fs-3：较大的字体大小。
  • fs-6：最小的字体大小。

7. 边框工具

你可以使用工具类来控制元素的边框样式、宽度和圆角。

示例：边框工具

<div class="border">Simple Border</div> <!-- 设置简单的边框 -->
<div class="border-0">No Border</div> <!-- 没有边框 -->
<div class="border-top">Top Border</div> <!-- 设置上边框 -->
<div class="rounded">Rounded Corners</div> <!-- 设置圆角 -->
<div class="border border-danger">Red Border</div> <!-- 设置红色边框 -->
  • border：为元素添加边框。
  • border-0：移除边框。
  • border-top：仅添加上边框。
  • rounded：设置元素的圆角。
  • border-danger：将边框设置为红色。

8. 透明度工具

通过 Bootstrap 5，你可以设置元素的透明度。

示例：透明度工具

<div class="opacity-50">50% Opacity</div> <!-- 设置 50% 透明度 -->
<div class="opacity-75">75% Opacity</div> <!-- 设置 75% 透明度 -->
<div class="opacity-100">100% Opacity (Full)</div> <!-- 设置 100% 透明度 -->
  • opacity-50：50% 透明度。
  • opacity-75：75% 透明度。
  • opacity-100：完全不透明。

9. 响应式显示类

这些类使你能够在不同的屏幕尺寸下控制元素的显示或隐藏。

示例：响应式显示

<div class="d-none d-sm-block">Visible on small screens and up</div>
<div class="d-none d-md-inline-block">Visible on medium screens and up</div>
<div class="d-lg-none">Visible only on small and medium screens</div>
  • d-none d-sm-block：在小屏幕及以上设备上显示。
  • d-md-inline-block：在中等屏幕及以上设备上显示。
  • d-lg-none：在大屏幕设备上隐藏。

10. 自定义属性和状态

Bootstrap 提供了一个全面的 状态工具类，可以控制某些状态，如：disabled、active、focus、checked 等。

示例：按钮状态

<button class="btn btn-primary" disabled>Disabled Button</button> <!-- 禁用按钮 -->
<a href="#" class="text-decoration-none">No Underline</a> <!-- 去掉链接下划线 -->
  • disabled：禁用元素。
  • text-decoration-none：去除文本下划线。

总结

Bootstrap 5 提供了强大而灵活的小工具类，可以帮助你快速调整页面布局和样式，而无需写大量的自定义 CSS。这些工具类包括对 间距、显示状态、文本样式、背景色、边框、透明度 等方面的控制，极大地简化了前端开发工作。通过结合这些工具类，可以高效地创建响应式和可访问的网页。