Bootstrap - 帮助程序类

Bootstrap 是一个流行的前端框架，是一个以 HTML，CSS 和 JavaScript 为基础的框架。它包含了许多通过 class 定义的帮助程序类，方便开发人员快速创建漂亮且易于维护的网站。

1. 帮助程序类概述

Bootstrap 的帮助程序类可以分为以下几类：

• 间距类（Spacing classes）
• 宽度类（Width classes）
• 文本类（Text classes）
• 显示类（Display classes）
• 边框类（Border classes）
• 背景类（Background classes）

2. 间距类

间距类用于调整元素之间的间距，包括内间距和外间距。以下是间距类的一些实例：

<!-- 外间距 -->
<div class="m-1">1 个单位的外间距</div>
<div class="my-1">上下各有 1 个单位的外间距</div>
<div class="mx-1">左右各有 1 个单位的外间距</div>

<!-- 内间距 -->
<div class="p-1">1 个单位的内间距</div>
<div class="py-1">上下各有 1 个单位的内间距</div>
<div class="px-1">左右各有 1 个单位的内间距</div>

在这里，m 表示 margin（外间距），p 表示 padding（内间距）。后续的 -1 表示 1 个单位的间距，y 表示垂直方向，x 表示水平方向。

3. 宽度类

宽度类用于设置元素的宽度大小。以下是一些宽度类的实例：

<!-- 固定宽度 -->
<div class="w-25">占用 25% 的宽度</div>
<div class="w-50">占用 50% 的宽度</div>
<div class="w-75">占用 75% 的宽度</div>

<!-- 自适应宽度 -->
<div class="mw-100">最大宽度为 100%</div>
<div class="vw-100">占用整个视口的宽度</div>

在这里，w 表示 width（宽度），mw 表示 max-width（最大宽度），vw 表示 viewport width（视口宽度）。

4. 文本类

文本类用于设置文本的相关属性，以下是一些文本类的实例：

<!-- 对齐 -->
<div class="text-left">左对齐</div>
<div class="text-center">居中对齐</div>
<div class="text-right">右对齐</div>

<!-- 加粗 -->
<div class="font-weight-bold">加粗文本</div>

<!-- 斜体 -->
<div class="font-italic">斜体文本</div>

在这里，text- 表示文本对齐方式，font-weight-bold 表示粗体字，font-italic 表示斜体字。

5. 显示类

显示类用于控制元素在不同屏幕大小下的可见性。以下是一些显示类的示例：

<!-- 显示 -->
<div class="d-block">块级元素</div>
<div class="d-inline">行内元素</div>
<div class="d-none">在所有屏幕尺寸下隐藏</div>

<!-- 响应式 -->
<div class="d-none d-md-block">在中型屏幕及以上显示</div>

在这里，d- 表示 display（显示），block 表示块级元素，inline 表示行内元素，none 表示隐藏。

6. 边框类

边框类用于控制元素的边框样式。以下是一些边框类的示例：

<!-- 边框颜色 -->
<div class="border border-primary">Primary 颜色的边框</div>

<!-- 圆角 -->
<div class="rounded">四个角都是圆角</div>
<div class="rounded-top">顶部是圆角</div>

<!-- 边框大小 -->
<div class="border border-1">1 个单位粗的边框</div>

<!-- 边框样式 -->
<div class="border border-top-0">顶部没有边框</div>
<div class="border border-danger border-left-0">没有左边框并且有 danger 颜色的边框</div>

在这里，border 表示边框样式，border-primary 表示 primary（主要）颜色的边框，rounded 表示所有角都是圆角。

7. 背景类

背景类用于设置元素的背景颜色或背景图片。以下是一些背景类的示例：

<!-- 背景颜色 -->
<div class="bg-primary">Primary 颜色的背景</div>

<!-- 背景图片 -->
<div class="bg-image" style="background-image: url('background.jpg')">背景图片</div>

在这里，bg- 表示背景颜色，bg-image 表示背景图片。背景图片需要在样式中通过 background-image 属性指定。

8. 总结

Bootstrap 的帮助程序类提供了方便的方式来设置元素的外观和响应式行为。这些类可以减少编写 CSS 的时间和工作量，同时提供了一个标准化的 UI。