在 Bootstrap 4 中，小工具（Utilities）是一些非常常用的辅助类，它们允许你快速控制元素的布局、外观和行为。这些小工具不依赖于 JavaScript，完全通过 CSS 类来实现，可以提高开发效率，简化代码，并减少自定义 CSS 的需要。
常用的小工具（Utilities）：
1. 颜色工具（Text & Background Colors）
Bootstrap 提供了许多类来改变文本颜色、背景颜色和链接颜色等。
示例：
- 文本颜色：可以使用
.text-*类来设置文本颜色。<p class="text-primary">This is a primary text</p> <p class="text-success">This is a success text</p> <p class="text-danger">This is a danger text</p> <p class="text-muted">This is a muted text</p> <p class="text-white bg-dark">This text has a white color on a dark background</p> - 背景颜色：使用
.bg-*类来设置背景颜色。<div class="bg-primary text-white">This is a blue background with white text</div> <div class="bg-success text-white">This is a green background with white text</div>
2. 间距工具（Spacing）
通过 .m-* 和 .p-* 类来快速设置元素的外边距（margin）和内边距（padding）。
示例：
- 外边距（Margin）：
.m-0,.m-1,.m-2,.m-3,.m-4,.m-5：设置所有边的外边距。.mt-*,.mr-*,.mb-*,.ml-*：分别设置上、右、下、左的外边距。
<div class="m-3">This div has margin on all sides</div> <div class="mt-5">This div has top margin</div> - 内边距（Padding）：
.p-0,.p-1,.p-2,.p-3,.p-4,.p-5：设置所有边的内边距。.pt-*,.pr-*,.pb-*,.pl-*：分别设置上、右、下、左的内边距。
<div class="p-3">This div has padding on all sides</div> <div class="pt-2">This div has top padding</div>
3. 文本对齐（Text Alignment）
使用 .text-* 类来控制文本的对齐方式。
示例：
- 文本对齐：
<p class="text-left">This text is aligned to the left</p> <p class="text-center">This text is centered</p> <p class="text-right">This text is aligned to the right</p>
4. 字体工具（Font Size & Weight）
- 字体大小：使用
.fs-*来设置字体大小，Bootstrap 4 没有内置的字体大小类，但你可以自定义。 - 字体粗细：使用
.font-weight-*类来控制字体的粗细。
示例：
<p class="font-weight-bold">This text is bold</p>
<p class="font-weight-light">This text is light</p>
5. 显示工具（Display）
控制元素的显示行为，例如隐藏或显示元素、响应式显示等。
示例：
- 显示或隐藏元素：
<div class="d-none">This is hidden</div> <div class="d-block">This is displayed as block</div> <div class="d-inline">This is displayed inline</div> <div class="d-inline-block">This is displayed inline-block</div> - 响应式显示：
<div class="d-sm-none">Hidden on small screens and up</div> <div class="d-md-block">Visible on medium screens and up</div>
6. 边框工具（Borders）
使用 .border, .border-top, .border-right, .border-bottom, .border-left 等类来控制边框。
示例：
<div class="border">This div has a border</div>
<div class="border-top">This div has a top border</div>
<div class="border-danger">This div has a red border</div>
7. 浮动工具（Float）
通过 .float-* 类来控制元素的浮动。
示例：
<img src="image.jpg" class="float-left" alt="float left">
<img src="image.jpg" class="float-right" alt="float right">
8. 可视化工具（Visibility）
控制元素的可见性，使用 .visible-* 或 .invisible 类来显示或隐藏元素，但不影响元素占据的空间。
示例：
<div class="invisible">This is invisible, but still takes up space</div>
<div class="visible">This is visible</div>
9. 透明度工具（Opacity）
控制元素的透明度，使用 .opacity-* 类来设置透明度。
示例：
<div class="opacity-50">This div has 50% opacity</div>
<div class="opacity-100">This div is fully opaque</div>
10. 文本修饰工具（Text Decoration）
通过 .text-decoration-* 类来控制文本的装饰。
示例：
<p class="text-decoration-none">This text has no underline</p>
<p class="text-decoration-underline">This text is underlined</p>
11. 垂直对齐（Vertical Alignment）
通过 .align-* 类来设置元素的垂直对齐方式。
示例：
<p class="align-middle">This text is vertically aligned to the middle</p>
<p class="align-top">This text is aligned to the top</p>
<p class="align-bottom">This text is aligned to the bottom</p>
12. 宽度工具（Width）
Bootstrap 提供了一些宽度工具类来控制元素的宽度。
示例：
<div class="w-25">This div has 25% width</div>
<div class="w-50">This div has 50% width</div>
<div class="w-75">This div has 75% width</div>
<div class="w-100">This div has 100% width</div>
总结：
Bootstrap 4 的小工具（Utilities）为开发者提供了丰富的类，可以快速、灵活地调整布局、外观和行为。通过简单的类，你可以方便地处理间距、颜色、字体、显示等常见需求，而不需要编写大量的自定义 CSS。这些小工具是帮助提高开发效率和实现响应式设计的强大工具。
发表回复