Bootstrap 提供了一套丰富的实用工具类，帮助开发者快速构建响应式和自适应的网页布局。这些工具类覆盖了从基本的文本样式到复杂的布局调整等多个方面。本章将详细介绍这些实用工具类及其用法。
文本对齐
Bootstrap 提供了一些简单的类来控制文本的对齐方式。以下是常用的几个文本对齐类：
.text-start：使文本左对齐。.text-end：使文本右对齐。.text-center：使文本居中对齐。.text-sm-start、.text-md-start等：用于在不同屏幕尺寸下设置不同的文本对齐方式。.text-sm-end、.text-md-end等：同上，用于右对齐。.text-sm-center、.text-md-center等：同上，用于居中对齐。
示例代码：
<p class="text-start">这是一个左对齐的段落。</p> <p class="text-end">这是一个右对齐的段落。</p> <p class="text-center">这是一个居中对齐的段落。</p>
文本颜色
通过使用 Bootstrap 的文本颜色类，可以轻松改变文本的颜色。以下是一些常见的文本颜色类：
.text-primary：将文本颜色设为强调色（通常是蓝色）。.text-secondary：将文本颜色设为次级色（通常是灰色）。.text-success：将文本颜色设为成功状态色（通常是绿色）。.text-danger：将文本颜色设为危险状态色（通常是红色）。.text-warning：将文本颜色设为警告状态色（通常是黄色）。.text-info：将文本颜色设为信息状态色（通常是蓝色）。.text-light：将文本颜色设为浅色。.text-dark：将文本颜色设为深色。.text-body：将文本颜色设为默认文本颜色。.text-muted：将文本颜色设为浅灰色（通常用于表示次要或不重要信息）。
示例代码：
-- -------------------- ---- ------- -- ------------------------------------ -- -------------------------------------- -- ----------------------------------- -- ---------------------------------- -- ----------------------------------- -- -------------------------------- -- ----------------- ------------------------------- -- ---------------------------------- -- ------------------------------------ -- ------------------------------------
文本装饰
Bootstrap 提供了一些文本装饰类，可以帮助你在文本上添加删除线、下划线等效果。
.text-decoration-none：移除文本的任何装饰。.text-decoration-underline：给文本添加下划线。.text-decoration-line-through：给文本添加删除线。
示例代码：
<p class="text-decoration-none">这是一个没有装饰的段落。</p> <p class="text-decoration-underline">这是一个带有下划线的段落。</p> <p class="text-decoration-line-through">这是一个带有删除线的段落。</p>
显示与隐藏
为了更好地控制元素在不同屏幕尺寸下的显示情况，Bootstrap 提供了一系列的显示和隐藏类。这些类允许你在特定的视口大小下隐藏或显示元素。
.d-none：在所有视口中隐藏元素。.d-block、.d-inline、.d-inline-block：在所有视口中分别将元素设置为块级元素、内联元素或内联块级元素。.d-sm-none、.d-md-none、.d-lg-none、.d-xl-none、.d-print-none：在指定的视口尺寸下隐藏元素。.d-sm-block、.d-md-block、.d-lg-block、.d-xl-block、.d-print-block：在指定的视口尺寸下将元素设置为块级元素。.d-sm-inline、.d-md-inline、.d-lg-inline、.d-xl-inline、.d-print-inline：在指定的视口尺寸下将元素设置为内联元素。.d-sm-inline-block、.d-md-inline-block、.d-lg-inline-block、.d-xl-inline-block、.d-print-inline-block：在指定的视口尺寸下将元素设置为内联块级元素。
示例代码：
<div class="d-none d-md-block">这个元素在小屏幕上隐藏，在中等及以上的屏幕上显示。</div> <div class="d-block d-md-none">这个元素在中等及以上的屏幕上隐藏，在小屏幕上显示。</div>
边距和填充
Bootstrap 提供了一些方便的类来快速设置元素的边距和填充。这些类包括 .m-*、.mt-*、.mr-*、.mb-*、.ml-*、.mx-* 和 .my-* 等，其中 * 可以是预定义的间距值之一（如 0 到 5），也可以是 auto 来实现自动边距。
示例代码：
<div class="m-3">这是具有3个单位边距的元素。</div> <div class="mt-4">这是具有4个单位上边距的元素。</div> <div class="mr-2">这是具有2个单位右边距的元素。</div> <div class="mb-5">这是具有5个单位下边距的元素。</div> <div class="ml-1">这是具有1个单位左边距的元素。</div> <div class="mx-auto">这是水平居中的元素。</div> <div class="my-3">这是具有3个单位上下边距的元素。</div>
可见性
Bootstrap 提供了一些类来控制元素的可见性。这些类包括 .visible 和 .invisible，它们可以用来动态地显示或隐藏元素，而不会影响布局。
.visible：使元素变得可见。.invisible：使元素变得不可见，但保留其在布局中的空间。
示例代码：
<div class="invisible">这是一个不可见的元素。</div>
<button onclick="this.nextElementSibling.classList.toggle('invisible')">切换可见性</button>以上是关于 Bootstrap 5 实用工具的详细说明，这些工具类能够极大地提高前端开发的效率，并使页面更加美观和功能完善。