Bootstrap 小工具
🎯 概述
Bootstrap 小工具（Utilities）是一组实用的 CSS 类，用于快速设置元素的样式，包括间距、颜色、显示、定位等。
📏 间距工具
html
<!-- 外边距 -->
<div class="m-3">所有方向外边距</div>
<div class="mt-3">顶部外边距</div>
<div class="mb-3">底部外边距</div>
<div class="ms-3">左侧外边距</div>
<div class="me-3">右侧外边距</div>
<div class="mx-3">水平外边距</div>
<div class="my-3">垂直外边距</div>
<!-- 内边距 -->
<div class="p-3">所有方向内边距</div>
<div class="pt-3">顶部内边距</div>
<div class="pb-3">底部内边距</div>
<div class="ps-3">左侧内边距</div>
<div class="pe-3">右侧内边距</div>
<div class="px-3">水平内边距</div>
<div class="py-3">垂直内边距</div>🎨 颜色工具
html
<!-- 文本颜色 -->
<p class="text-primary">主要文本</p>
<p class="text-success">成功文本</p>
<p class="text-danger">危险文本</p>
<p class="text-warning">警告文本</p>
<p class="text-info">信息文本</p>
<!-- 背景颜色 -->
<div class="bg-primary text-white">主要背景</div>
<div class="bg-success text-white">成功背景</div>
<div class="bg-danger text-white">危险背景</div>📐 显示工具
html
<div class="d-none">隐藏</div>
<div class="d-block">块级显示</div>
<div class="d-inline">内联显示</div>
<div class="d-inline-block">内联块显示</div>
<div class="d-flex">弹性盒子</div>
<div class="d-grid">网格</div>🌟 实际示例
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 小工具示例</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container my-5">
<h1>Bootstrap 小工具示例</h1>
<h2>间距示例</h2>
<div class="p-3 mb-3 bg-light">内边距 3</div>
<div class="m-3 p-3 bg-primary text-white">外边距 3</div>
<h2>颜色示例</h2>
<p class="text-primary">主要文本颜色</p>
<p class="text-success">成功文本颜色</p>
<div class="bg-warning p-3">警告背景颜色</div>
<h2>显示示例</h2>
<div class="d-flex justify-content-between">
<div>项目 1</div>
<div>项目 2</div>
<div>项目 3</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>