Bootstrap 4 工具类

间距 Spacing

Bootstrap 4 的间距类使用 {property}{direction}-{size} 模式，方向使用 l（左）和 r（右）：

<div class="mt-3">上外边距</div>
<div class="mb-3">下外边距</div>
<div class="ml-3">左外边距</div>
<div class="mr-3">右外边距</div>
<div class="mx-auto">水平居中</div>
<div class="py-4">上下内边距</div>
<div class="pl-4">左内边距</div>
<div class="pr-4">右内边距</div>

颜色 Colors

<p class="text-primary">主要文字色</p>
<p class="text-secondary">次要文字色</p>
<p class="text-success">成功文字色</p>
<p class="text-danger">危险文字色</p>
<p class="text-warning">警告文字色</p>
<p class="text-info">信息文字色</p>
<p class="text-light">浅色文字</p>
<p class="text-dark">深色文字</p>
<p class="text-muted">弱化文字</p>
<p class="text-white">白色文字</p>

<div class="bg-primary text-white">主要背景</div>
<div class="bg-success text-white">成功背景</div>
<div class="bg-danger text-white">危险背景</div>

注意：Bootstrap 4 没有 .text-body、.text-black-50、.bg-body、.bg-transparent 等 v5 新增的工具类。

浮动 Float

<div class="float-left">左浮动</div>
<div class="float-right">右浮动</div>
<div class="float-none">取消浮动</div>
<div class="float-sm-right">响应式右浮动</div>

v5 中将 .float-left/.float-right 改为 .float-start/.float-end。

显示 Display

<div class="d-none">完全隐藏</div>
<div class="d-inline">行内显示</div>
<div class="d-inline-block">行内块级</div>
<div class="d-block">块级显示</div>
<div class="d-table">表格显示</div>
<div class="d-flex">弹性盒子</div>
<div class="d-inline-flex">行内弹性盒子</div>
<div class="d-none d-md-block">仅在中等屏幕以上显示</div>

注意：Bootstrap 4 没有 .d-grid（v5 新增的 CSS Grid 支持）。

字体排版

<p class="font-weight-bold">加粗（v5: .fw-bold）</p>
<p class="font-weight-normal">正常粗细</p>
<p class="font-weight-light">细体</p>
<p class="font-italic">斜体（v5: .fst-italic）</p>
<p class="text-monospace">等宽字体</p>
<p class="text-lowercase">全部小写</p>
<p class="text-uppercase">全部大写</p>
<p class="text-capitalize">首字母大写</p>
<p class="text-truncate">长文本将被截断显示为省略号...</p>

v5 将 .font-weight-* 改为 .fw-*，.font-italic 改为 .fst-italic。

边框 Borders

<div class="border">四边边框</div>
<div class="border-top">上边框</div>
<div class="border-bottom">下边框</div>
<div class="border-left">左边框（v5: .border-start）</div>
<div class="border-right">右边框（v5: .border-end）</div>
<div class="border border-primary">带颜色边框</div>
<div class="rounded">圆角</div>
<div class="rounded-circle">圆形</div>
<div class="rounded-0">无圆角</div>

v5 将 .border-left/.border-right 改为 .border-start/.border-end。此外 v4 不支持 .rounded-1 到 .rounded-3 的细粒度圆角（v5 新增）。

阴影 Shadows

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

阴影工具类在 v4 和 v5 中用法一致。

文本对齐

<p class="text-left">左对齐（v5: .text-start）</p>
<p class="text-center">居中</p>
<p class="text-right">右对齐（v5: .text-end）</p>

v5 将 .text-left/.text-right 改为 .text-start/.text-end。

宽高 Sizing

<div class="w-25">宽度 25%</div>
<div class="w-50">宽度 50%</div>
<div class="w-75">宽度 75%</div>
<div class="w-100">宽度 100%</div>
<div class="mw-100">最大宽度 100%</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>

宽高工具类在 v4 和 v5 中用法一致。

可见性 Visibility

<div class="visible">可见</div>
<div class="invisible">不可见（仍占用空间）</div>

屏幕阅读器

<!-- Bootstrap 4 -->
<span class="sr-only">仅供屏幕阅读器</span>

<!-- Bootstrap 5 -->
<span class="visually-hidden">仅供屏幕阅读器</span>

v5 将 .sr-only 改为 .visually-hidden。

工具类命名对照表