工具类

间距 Spacing

使用 m（外边距 margin）和 p（内边距 padding）配合方向标识：

<div class="mt-3">上外边距</div>
<div class="mb-3">下外边距</div>
<div class="my-5">上下外边距</div>
<div class="mx-auto">水平居中</div>
<div class="py-4">上下内边距</div>
<div class="px-4">左右内边距</div>
<div class="p-5">四周内边距</div>

间距值从 0 到 5，其中 0 表示无间距，3 是默认间距，5 是最大间距。

颜色 Colors

<p class="text-primary">主要文字色</p>
<p class="text-success">成功文字色</p>
<p class="text-danger">危险文字色</p>
<p class="text-muted">弱化文字色</p>
<div class="bg-primary text-white">背景色-主要</div>
<div class="bg-dark text-white">背景色-深色</div>
<div class="bg-light">背景色-浅色</div>

显示 Display

<div class="d-none">完全隐藏</div>
<div class="d-block">块级显示</div>
<div class="d-flex">弹性盒子</div>
<div class="d-grid">网格布局</div>
<div class="d-none d-md-block">仅在中等屏幕以上显示</div>

Flexbox 工具

<div class="d-flex justify-content-center">水平居中</div>
<div class="d-flex align-items-center">垂直居中</div>
<div class="d-flex justify-content-between">两端对齐</div>
<div class="d-flex gap-3">子元素间距</div>

边框 Borders

<div class="border">四边边框</div>
<div class="border-top">上边框</div>
<div class="border border-primary">带颜色边框</div>
<div class="rounded">圆角</div>
<div class="rounded-3">大圆角</div>
<div class="rounded-circle">圆形</div>

阴影 Shadows

<div class="shadow-none">无阴影</div>
<div class="shadow-sm">小阴影</div>
<div class="shadow">默认阴影</div>
<div class="shadow-lg">大阴影</div>

文本 Text

<p class="text-start">左对齐</p>
<p class="text-center">居中</p>
<p class="text-end">右对齐</p>
<p class="fw-bold">加粗</p>
<p class="fw-normal">正常</p>
<p class="fst-italic">斜体</p>
<p class="text-truncate">长文本将被截断显示为省略号...</p>

宽高 Sizing

<div class="w-25">宽度 25%</div>
<div class="w-50">宽度 50%</div>
<div class="w-100">宽度 100%</div>
<div class="mw-100">最大宽度 100%</div>

文本更多选项

文本工具类支持对齐、转换、截断、字重和行高：

<p class="text-lowercase">全部小写</p>
<p class="text-uppercase">全部大写</p>
<p class="text-capitalize">首字母大写</p>
<p class="text-wrap">正常换行</p>
<p class="text-nowrap">强制不换行</p>
<p class="text-break">长单词强制断行</p>
<p class="lh-1">行高 1</p>
<p class="lh-sm">小行高</p>
<p class="lh-base">默认行高</p>
<p class="lh-lg">大行高</p>

背景与渐变

<div class="bg-primary text-white p-3">主要背景</div>
<div class="bg-secondary text-white p-3">次要背景</div>
<div class="bg-success text-white p-3">成功背景</div>
<div class="bg-danger text-white p-3">危险背景</div>
<div class="bg-warning text-dark p-3">警告背景</div>
<div class="bg-info text-dark p-3">信息背景</div>
<div class="bg-dark text-white p-3">深色背景</div>
<div class="bg-light p-3">浅色背景</div>
<div class="bg-transparent p-3">透明背景</div>
<div class="bg-body p-3">默认主体背景</div>

<!-- 背景渐变（需要 Bootstrap 5.3+） -->
<div class="bg-primary bg-gradient text-white p-3">渐变主要背景</div>

边框更多选项

<!-- 边框颜色 -->
<div class="border border-primary">主要色边框</div>
<div class="border border-success">成功色边框</div>
<div class="border border-danger">危险色边框</div>

<!-- 边框宽度 -->
<div class="border border-2">2px 边框</div>
<div class="border border-3">3px 边框</div>
<div class="border border-4">4px 边框</div>
<div class="border border-5">5px 边框</div>

<!-- 移除边框 -->
<div class="border border-0">无边框</div>
<div class="border border-top-0">无上边框</div>
<div class="border border-end-0">无右边框</div>

<!-- 圆角大小 -->
<div class="rounded-0">无圆角</div>
<div class="rounded-1">小圆角</div>
<div class="rounded-2">中等圆角（默认）</div>
<div class="rounded-3">大圆角</div>
<div class="rounded-pill">胶囊圆角</div>
<div class="rounded-circle">圆形（宽高相等时）</div>

阴影实用类

<div class="shadow-none p-3 mb-3 bg-body rounded">无阴影</div>
<div class="shadow-sm p-3 mb-3 bg-body rounded">小阴影</div>
<div class="shadow p-3 mb-3 bg-body rounded">默认阴影</div>
<div class="shadow-lg p-3 mb-3 bg-body rounded">大阴影</div>

宽高与视口

<!-- 百分比宽度 -->
<div class="w-25 p-3">宽度 25%</div>
<div class="w-50 p-3">宽度 50%</div>
<div class="w-75 p-3">宽度 75%</div>
<div class="w-100 p-3">宽度 100%</div>
<div class="mw-100 p-3">最大宽度 100%</div>

<!-- 视口单位 -->
<div class="min-vw-100">最小宽度 100vw</div>
<div class="min-vh-100">最小高度 100vh</div>
<div class="vw-100">宽度 100vw</div>
<div class="vh-100">高度 100vh</div>

<!-- 百分比高度 -->
<div class="h-25">高度 25%</div>
<div class="h-50">高度 50%</div>
<div class="h-75">高度 75%</div>
<div class="h-100">高度 100%</div>
<div class="mh-100">最大高度 100%</div>

间距响应式类

间距类支持响应式断点，在不同屏幕尺寸下应用不同的间距：

<div class="mt-3 mt-md-0 mt-lg-5">
    移动端上边距 3，平板取消上边距，桌面大上边距 5
</div>
<div class="p-2 p-sm-3 p-md-4 p-lg-5">
    响应式内边距，从 2 到 5 逐级增加
</div>
<div class="mx-auto mx-md-0">
    移动端居中，平板及以上取消居中
</div>

Flexbox 进阶

<!-- 弹性方向 -->
<div class="d-flex flex-row">水平排列（默认）</div>
<div class="d-flex flex-column">垂直排列</div>
<div class="d-flex flex-row-reverse">水平反向排列</div>

<!-- 弹性换行 -->
<div class="d-flex flex-wrap">允许换行</div>
<div class="d-flex flex-nowrap">禁止换行</div>

<!-- 子元素伸缩 -->
<div class="d-flex">
    <div class="flex-fill">等宽伸缩</div>
    <div class="flex-fill">等宽伸缩</div>
</div>
<div class="d-flex">
    <div class="flex-grow-1">占据剩余空间</div>
    <div class="flex-shrink-1">可收缩</div>
</div>

最佳实践

• 优先使用工具类而非自定义 CSS，保持代码一致性和可维护性
• 间距类遵循 {property}{direction}-{size} 模式，如 mt-3
• 使用响应式前缀在不同断点调整样式，如 d-none d-md-block
• 组合多个工具类实现复杂效果，如 d-flex justify-content-center align-items-center
• 避免滥用工具类导致 HTML 冗长，可提取重复组合为自定义类

常见问题