Bootstrap 是一个流行的前端框架，它可以帮助开发者快速构建响应式、移动优先的网站和应用程序。Bootstrap 5 是其最新版本，带来了许多新的特性和改进。在这篇文章中，我们将深入了解 Bootstrap 5 中的工具类和变量，帮助你高效地运用这个框架。
工具类
Bootstrap 5 提供了丰富的工具类（utility classes），这些类可以用来快速设置样式，而不需要编写复杂的 CSS。以下是一些常用的工具类：
布局类（Layout）
.container,.container-fluid: 创建响应式容器。.row: 创建行容器。.col-,.col-sm-,.col-md-,.col-lg-,.col-xl-: 创建列，并指定不同屏幕尺寸下的宽度。
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">内容</div>
</div>
</div>
文本类（Text）
.text-muted,.text-primary,.text-success,.text-danger,.text-warning: 设置文本颜色。.text-capitalize,.text-lowercase,.text-uppercase: 设置文本大小写。.text-left,.text-center,.text-right,.text-justify: 设置文本对齐方式。
<p class="text-primary">这是一个重要的段落。</p>
<p class="text-center">居中对齐的文本。</p>
边距类（Margin）
.m-,.mt-,.mr-,.mb-,.ml-: 设置外边距。.p-,.pt-,.pr-,.pb-,.pl-: 设置内边距。
<div class="m-3">带有外边距的元素。</div>
<div class="p-2">带有内边距的元素。</div>
其他类
.bg-: 设置背景颜色。.border-: 设置边框样式。.rounded-: 设置圆角。
<div class="bg-primary rounded-3">带有背景颜色和圆角的元素。</div>
变量
Bootstrap 5 引入了一个新的变量系统，使得自定义主题变得更容易。以下是一些重要的变量：
变量类型
$colors: 颜色变量。$gradients: 渐变变量。$fonts: 字体变量。$spacings: 空间变量。$zindex: 层叠顺序变量。
使用变量
// 设置颜色变量
$primary: #007bff;
// 在类中使用变量
.bg-primary {
background-color: $primary;
}
总结
通过熟练掌握 Bootstrap 5 的工具类和变量，你可以快速构建美观、响应式的网页。在接下来的项目中，尝试使用这些工具，提高你的工作效率。