Bootstrap 工具类

如果说栅格和组件是 Bootstrap 的"明星功能",那工具类(utilities)就是它的"幕后英雄"——一组原子化的 class,涵盖间距、flex、文本、显隐、阴影等。Bootstrap 之所以能"不写一行 CSS 就做出像样的页面",全靠这些工具类。

1. 间距:spacing(p / m)

间距是用得最多的工具类。命名规则是"属性 + 方向 + 尺寸",例如 pt-3 表示"上内边距 1rem"、mb-4 表示"下外边距 1.5rem":

<!-- 间距工具类:{property}{sides}-{size} -->
<!-- property: p=padding, m=margin -->
<!-- sides: t=上 b=下 s=start(左) e=end(右) x=左右 y=上下 空=四边 -->
<!-- size: 0~5,auto -->

<!-- 内边距 padding -->
<div class="p-0">无内边距</div>
<div class="p-1">极小内边距(.25rem = 4px)</div>
<div class="p-2">小内边距(.5rem = 8px)</div>
<div class="p-3">默认内边距(1rem = 16px)</div>
<div class="p-4">大内边距(1.5rem = 24px)</div>
<div class="p-5">超大内边距(3rem = 48px)</div>

<!-- 单边内边距 -->
<div class="pt-3 pb-2 ps-4 pe-1">上3 下2 左4 右1</div>

<!-- 外边距 margin -->
<div class="mt-3">上外边距 1rem(常用于段落间距)</div>
<div class="mb-4">下外边距 1.5rem</div>
<div class="mx-auto">左右 auto(水平居中块元素!)</div>

<!-- 段落底部不留白 -->
<p class="mb-0">这段文字下方没有间距</p>

关键记忆:

property:p = padding,m = margin。
sides:t/b/s/e/x/y/空 = 上/下/start(左)/end(右)/左右/上下/四边。Bootstrap 5 用 start / end 替代了 left / right(为了支持 RTL 从右到左的语言)。
size:0~5,每个数字对应固定的 rem 值(0.25 / 0.5 / 1 / 1.5 / 3rem)。
mx-auto:水平居中块元素的快捷方式(等于 margin: 0 auto)。
mb-0:去掉段落默认下边距,常用于消除"奇怪的白条"。

2. 显示与隐藏:d-*

d-*(display)控制元素的显示方式:

<!-- d-*:display 工具类 -->
<div class="d-none">隐藏(不占空间)</div>
<div class="d-inline">行内元素</div>
<div class="d-block">块元素</div>
<div class="d-inline-block">行内块</div>
<div class="d-flex">flex 容器</div>
<div class="d-inline-flex">行内 flex</div>
<div class="d-grid">网格容器</div>

<!-- 响应式:加断点后缀 -->
<div class="d-none d-lg-block">桌面显示,手机隐藏</div>
<div class="d-lg-none">桌面隐藏,手机显示</div>
<div class="d-none d-md-block d-lg-none">只在平板显示</div>

最常用的是响应式显隐:

d-none d-lg-block:默认隐藏,lg 及以上显示。常用于"只在桌面显示的侧边栏"。
d-lg-none:默认显示,lg 及以上隐藏。常用于"只在手机显示的汉堡菜单"。
d-none d-md-block d-lg-none:只在 md(平板)显示——组合实现"特定断点显示"。

3. flex 弹性布局

Bootstrap 把 Flexbox 几乎所有功能都做成了工具类,这是写复杂布局的核心:

<!-- d-flex 把元素变成 flex 容器 -->
<div class="d-flex">...</div>

<!-- 主轴方向(子元素排列方向) -->
<div class="d-flex flex-row">水平(默认,从左到右)</div>
<div class="d-flex flex-row-reverse">水平反向</div>
<div class="d-flex flex-column">垂直(从上到下)</div>
<div class="d-flex flex-column-reverse">垂直反向</div>

<!-- 主轴对齐 -->
<div class="d-flex justify-content-start">靠左(默认)</div>
<div class="d-flex justify-content-center">居中</div>
<div class="d-flex justify-content-end">靠右</div>
<div class="d-flex justify-content-between">两端对齐</div>
<div class="d-flex justify-content-around">四周环绕</div>
<div class="d-flex justify-content-evenly">均匀分布</div>

<!-- 交叉轴对齐(垂直对齐) -->
<div class="d-flex align-items-start">顶对齐</div>
<div class="d-flex align-items-center">垂直居中</div>
<div class="d-flex align-items-end">底对齐</div>
<div class="d-flex align-items-baseline">文字基线对齐</div>
<div class="d-flex align-items-stretch">拉伸填满(默认)</div>

<!-- 自动外边距(子元素推到一端) -->
<div class="d-flex">
  <div>左</div>
  <div class="ms-auto">右(被推到最右)</div>
</div>

<!-- 等宽子元素:flex-fill -->
<div class="d-flex">
  <div class="flex-fill">A</div>
  <div class="flex-fill">B</div>
  <div class="flex-fill">C</div>
</div>

常用场景:

水平垂直居中:d-flex justify-content-center align-items-center——CSS 招聘面试经典题。
一个元素靠左,一个靠右:给右侧元素加 ms-auto,不用写 float 或 position。
三个子元素等宽:每个加 flex-fill。

4. flex 高级:换行与排序

<!-- flex-wrap:是否换行 -->
<div class="d-flex flex-nowrap">不换行(默认,会溢出)</div>
<div class="d-flex flex-wrap">换行</div>
<div class="d-flex flex-wrap-reverse">反向换行</div>

<!-- 子元素顺序:order-* -->
<div class="d-flex">
  <div class="order-3">A 显示最后</div>
  <div class="order-1">B 显示第一</div>
  <div class="order-2">C 显示中间</div>
</div>

flex-wrap 让 flex 子元素自动换行——配合 row 类似的效果,但更灵活(可以非 12 等分)。order-* 控制子元素视觉顺序,DOM 不变。

5. 文本工具类

文本对齐、颜色、字重、字号都有工具类:

<!-- 文本对齐 -->
<p class="text-start">左对齐(Bootstrap 5 起 start 替代 left)</p>
<p class="text-center">居中</p>
<p class="text-end">右对齐</p>

<!-- 响应式文本对齐 -->
<p class="text-start text-md-center">手机左对齐,md 及以上居中</p>

<!-- 文字颜色 -->
<p class="text-primary">主题色</p>
<p class="text-danger">红色(常用于错误)</p>
<p class="text-success">绿色</p>
<p class="text-muted">灰色(常用于次要文字)</p>
<p class="text-white bg-dark">白色(配合深色背景)</p>

<!-- 字重 -->
<p class="fw-bold">加粗</p>
<p class="fw-normal">正常</p>
<p class="fw-light">细体</p>

<!-- 字号 -->
<p class="fs-1">超大字号</p>
<p class="fs-3">大字号</p>
<p class="fs-6">默认字号</p>

<!-- 文字装饰 -->
<p class="text-decoration-none">无下划线(链接常用)</p>
<p class="text-decoration-underline">下划线</p>
<p class="text-decoration-line-through">删除线</p>

<!-- 大小写转换 -->
<p class="text-lowercase">lowercased</p>
<p class="text-uppercase">UPPERCASED</p>
<p class="text-capitalize">Capitalized Case</p>

几个高频组合:

次要说明文字:text-muted small(灰色 + 小字号)。
错误提示:text-danger small。
链接去下划线:text-decoration-none。
大标题:display-1 ~ display-6(比 h1-h6 更大更显眼)。

6. 其他实用工具类

还有一些"零碎但常用"的工具类:

<!-- 宽度 / 高度 -->
<div class="w-100">宽 100%</div>
<div class="w-50">宽 50%</div>
<div class="w-25">宽 25%</div>
<div class="h-100">高 100%</div>
<img class="w-100" src="..." />  <!-- 自适应图片 -->

<!-- 边框 -->
<div class="border">四周边框</div>
<div class="border-top border-primary">顶部主题色边框</div>
<div class="border-0">无边框</div>
<div class="border border-2 border-danger">粗红色边框</div>

<!-- 圆角 -->
<div class="rounded">小圆角</div>
<div class="rounded-3">大圆角</div>
<div class="rounded-pill">药丸圆角</div>
<div class="rounded-circle">圆形</div>

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

<!-- 透明度 -->
<div class="opacity-50">半透明</div>
<div class="opacity-100">不透明</div>

<!-- 定位 -->
<div class="position-static">默认</div>
<div class="position-relative">相对定位</div>
<div class="position-absolute top-0 start-0">绝对定位,左上角</div>
<div class="position-fixed">固定定位</div>
<div class="position-sticky top-0">粘性吸顶</div>

w-100 / h-100:占满父容器宽 / 高。图片自适应宽度常用 w-100。
rounded-circle:把方形图片变圆形头像。
shadow:卡片、模态框常用阴影。
position-relative:配合 position-absolute 的子元素做"角标"。
sticky-top:粘性吸顶,做表头、导航条。

7. 工具类的哲学

Bootstrap 的工具类设计是"原子化"的——每个 class 只做一件事,通过组合实现复杂效果。这跟 Tailwind 的理念一脉相承(Tailwind 把这种哲学推到了极致)。优点:

不用切换 HTML 和 CSS 文件,直接在标签上写。
无副作用,改一个 class 不会影响别的元素。
响应式天然支持:加 -md- / -lg- 后缀即可。

缺点:HTML 会变得"啰嗦",一个 div 上可能堆十几个 class。这是工具类哲学的代价,但对比维护独立 CSS 文件,大多数人觉得划算。

小结

工具类的核心:

间距:p/m + t/b/s/e/x/y + 0~5。
显隐:d-none d-lg-block 控制响应式显隐。
flex:d-flex + justify-content-* + align-items-*。
文本:text-* / fw-* / fs-*。

下一篇我们看响应式断点——把工具类和断点结合,实现"一套代码适配所有屏幕"。

← 上一篇表单与验证

下一篇响应式断点 →

✈️💬