bootstrap-utilities
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseBootstrap 5.3 Utilities
Bootstrap 5.3 工具类
Bootstrap provides extensive utility classes for rapid styling without custom CSS. These are generated via the Utilities API and can be customized.
Bootstrap 提供了丰富的工具类，无需自定义 CSS 即可快速完成样式设置。这些工具类通过 Utilities API 生成，并且可以自定义。
Spacing Utilities
间距工具类
Margin (m-) and Padding (p-)
外边距（m-）和内边距（p-）
html
<!-- All sides -->
<div class="m-3">Margin 1rem all sides</div>
<div class="p-3">Padding 1rem all sides</div>
<!-- Specific sides -->
<div class="mt-3">Margin top</div>
<div class="mb-3">Margin bottom</div>
<div class="ms-3">Margin start (left in LTR)</div>
<div class="me-3">Margin end (right in LTR)</div>
<div class="mx-3">Margin horizontal (left + right)</div>
<div class="my-3">Margin vertical (top + bottom)</div>
<!-- Same pattern for padding: pt-, pb-, ps-, pe-, px-, py- -->
<div class="px-3 py-2">Horizontal padding 1rem, vertical 0.5rem</div>html
<!-- 所有方向 -->
<div class="m-3">所有方向外边距 1rem</div>
<div class="p-3">所有方向内边距 1rem</div>
<!-- 指定方向 -->
<div class="mt-3">顶部外边距</div>
<div class="mb-3">底部外边距</div>
<div class="ms-3">起始方向外边距（LTR 布局中为左侧）</div>
<div class="me-3">结束方向外边距（LTR 布局中为右侧）</div>
<div class="mx-3">水平方向外边距（左 + 右）</div>
<div class="my-3">垂直方向外边距（上 + 下）</div>
<!-- 内边距遵循相同规则：pt-, pb-, ps-, pe-, px-, py- -->
<div class="px-3 py-2">水平内边距 1rem，垂直内边距 0.5rem</div>Spacing Scale
间距比例
| Class | Size |
|---|---|
| 0 |
| 0.25rem (4px) |
| 0.5rem (8px) |
| 1rem (16px) |
| 1.5rem (24px) |
| 3rem (48px) |
| auto (margin only) |
| 类名 | 尺寸 |
|---|---|
| 0 |
| 0.25rem（4px） |
| 0.5rem（8px） |
| 1rem（16px） |
| 1.5rem（24px） |
| 3rem（48px） |
| 自动（仅适用于外边距） |
Responsive Spacing
响应式间距
html
<div class="mt-0 mt-md-3 mt-lg-5">
No margin, 1rem on md, 3rem on lg+
</div>html
<div class="mt-0 mt-md-3 mt-lg-5">
默认无外边距，md 尺寸以上为 1rem，lg 尺寸以上为 3rem
</div>Gap Utilities (Flexbox/Grid)
间隙工具类（弹性盒/网格）
html
<div class="d-flex gap-3">
<div>Item 1</div>
<div>Item 2</div>
</div>
<div class="d-grid gap-2">
<button class="btn btn-primary">Button 1</button>
<button class="btn btn-primary">Button 2</button>
</div>
<!-- Row and column gaps -->
<div class="d-grid gap-0 row-gap-3 column-gap-3">...</div>html
<div class="d-flex gap-3">
<div>项目 1</div>
<div>项目 2</div>
</div>
<div class="d-grid gap-2">
<button class="btn btn-primary">按钮 1</button>
<button class="btn btn-primary">按钮 2</button>
</div>
<!-- 行和列间隙 -->
<div class="d-grid gap-0 row-gap-3 column-gap-3">...</div>Display Utilities
显示工具类
html
<div class="d-none">Hidden</div>
<div class="d-inline">Inline</div>
<div class="d-inline-block">Inline-block</div>
<div class="d-block">Block</div>
<div class="d-flex">Flexbox</div>
<div class="d-inline-flex">Inline flex</div>
<div class="d-grid">Grid</div>
<div class="d-table">Table</div>
<div class="d-table-row">Table row</div>
<div class="d-table-cell">Table cell</div>
<!-- Responsive display -->
<div class="d-none d-md-block">Hidden on xs/sm, block on md+</div>
<div class="d-block d-lg-none">Visible until lg</div>
<!-- Print display -->
<div class="d-print-none">Hidden in print</div>
<div class="d-none d-print-block">Only visible in print</div>html
<div class="d-none">隐藏</div>
<div class="d-inline">行内元素</div>
<div class="d-inline-block">行内块元素</div>
<div class="d-block">块级元素</div>
<div class="d-flex">弹性盒</div>
<div class="d-inline-flex">行内弹性盒</div>
<div class="d-grid">网格</div>
<div class="d-table">表格</div>
<div class="d-table-row">表格行</div>
<div class="d-table-cell">表格单元格</div>
<!-- 响应式显示 -->
<div class="d-none d-md-block">xs/sm 尺寸隐藏，md 尺寸以上为块级元素</div>
<div class="d-block d-lg-none">lg 尺寸之前可见</div>
<!-- 打印显示 -->
<div class="d-print-none">打印时隐藏</div>
<div class="d-none d-print-block">仅打印时可见</div>Text Utilities
文本工具类
Alignment
对齐方式
html
<p class="text-start">Left aligned (start)</p>
<p class="text-center">Center aligned</p>
<p class="text-end">Right aligned (end)</p>
<!-- Responsive alignment -->
<p class="text-start text-md-center text-lg-end">
Left on xs/sm, center on md, right on lg+
</p>html
<p class="text-start">左对齐（起始方向）</p>
<p class="text-center">居中对齐</p>
<p class="text-end">右对齐（结束方向）</p>
<!-- 响应式对齐 -->
<p class="text-start text-md-center text-lg-end">
xs/sm 尺寸左对齐，md 尺寸居中，lg 尺寸以上右对齐
</p>Transform
文本转换
html
<p class="text-lowercase">lowercased text</p>
<p class="text-uppercase">UPPERCASED TEXT</p>
<p class="text-capitalize">Capitalized Text</p>html
<p class="text-lowercase">小写文本</p>
<p class="text-uppercase">大写文本</p>
<p class="text-capitalize">首字母大写文本</p>Decoration
文本装饰
html
<a href="#" class="text-decoration-none">No underline</a>
<p class="text-decoration-underline">Underlined text</p>
<p class="text-decoration-line-through">Strikethrough text</p>html
<a href="#" class="text-decoration-none">无下划线</a>
<p class="text-decoration-underline">下划线文本</p>
<p class="text-decoration-line-through">删除线文本</p>Wrapping and Overflow
文本换行与溢出
html
<div class="text-wrap">Text that wraps normally</div>
<div class="text-nowrap">Text that won't wrap</div>
<p class="text-break">Longwordthatwillbreaktopreventoverflow</p>
<p class="text-truncate" style="max-width: 150px;">
This text is truncated with ellipsis...
</p>html
<div class="text-wrap">正常换行文本</div>
<div class="text-nowrap">不换行文本</div>
<p class="text-break">Longwordthatwillbreaktopreventoverflow</p>
<p class="text-truncate" style="max-width: 150px;">
此文本将被截断并显示省略号...
</p>Font Weight and Style
字体粗细与样式
html
<p class="fw-bold">Bold text</p>
<p class="fw-bolder">Bolder text (relative)</p>
<p class="fw-semibold">Semibold text</p>
<p class="fw-medium">Medium text</p>
<p class="fw-normal">Normal weight</p>
<p class="fw-light">Light text</p>
<p class="fw-lighter">Lighter text (relative)</p>
<p class="fst-italic">Italic text</p>
<p class="fst-normal">Normal style</p>html
<p class="fw-bold">粗体文本</p>
<p class="fw-bolder">更粗文本（相对父元素）</p>
<p class="fw-semibold">半粗体文本</p>
<p class="fw-medium">中等粗细文本</p>
<p class="fw-normal">正常粗细</p>
<p class="fw-light">轻量文本</p>
<p class="fw-lighter">更轻文本（相对父元素）</p>
<p class="fst-italic">斜体文本</p>
<p class="fst-normal">正常样式</p>Line Height
行高
html
<p class="lh-1">Line height 1</p>
<p class="lh-sm">Small line height</p>
<p class="lh-base">Base line height</p>
<p class="lh-lg">Large line height</p>html
<p class="lh-1">行高 1</p>
<p class="lh-sm">小行高</p>
<p class="lh-base">基础行高</p>
<p class="lh-lg">大行高</p>Flexbox Utilities
弹性盒工具类
Direction
排列方向
html
<div class="d-flex flex-row">Horizontal</div>
<div class="d-flex flex-row-reverse">Horizontal reversed</div>
<div class="d-flex flex-column">Vertical</div>
<div class="d-flex flex-column-reverse">Vertical reversed</div>html
<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>Justify Content
主轴对齐
html
<div class="d-flex justify-content-start">Start</div>
<div class="d-flex justify-content-end">End</div>
<div class="d-flex justify-content-center">Center</div>
<div class="d-flex justify-content-between">Space between</div>
<div class="d-flex justify-content-around">Space around</div>
<div class="d-flex justify-content-evenly">Space evenly</div>html
<div class="d-flex justify-content-start">起始端对齐</div>
<div class="d-flex justify-content-end">结束端对齐</div>
<div class="d-flex justify-content-center">居中对齐</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>Align Items
交叉轴对齐
html
<div class="d-flex align-items-start">Top</div>
<div class="d-flex align-items-end">Bottom</div>
<div class="d-flex align-items-center">Center</div>
<div class="d-flex align-items-baseline">Baseline</div>
<div class="d-flex align-items-stretch">Stretch</div>html
<div class="d-flex align-items-start">顶部对齐</div>
<div class="d-flex align-items-end">底部对齐</div>
<div class="d-flex align-items-center">居中对齐</div>
<div class="d-flex align-items-baseline">基线对齐</div>
<div class="d-flex align-items-stretch">拉伸填充</div>Align Self
自身对齐
html
<div class="align-self-start">Top</div>
<div class="align-self-center">Center</div>
<div class="align-self-end">Bottom</div>html
<div class="align-self-start">顶部对齐</div>
<div class="align-self-center">居中对齐</div>
<div class="align-self-end">底部对齐</div>Flex Wrap
换行设置
html
<div class="d-flex flex-wrap">Wrap</div>
<div class="d-flex flex-nowrap">No wrap</div>
<div class="d-flex flex-wrap-reverse">Wrap reverse</div>html
<div class="d-flex flex-wrap">自动换行</div>
<div class="d-flex flex-nowrap">不换行</div>
<div class="d-flex flex-wrap-reverse">反向换行</div>Flex Grow/Shrink
伸缩比例
html
<div class="flex-grow-0">Don't grow</div>
<div class="flex-grow-1">Grow to fill</div>
<div class="flex-shrink-0">Don't shrink</div>
<div class="flex-shrink-1">Can shrink</div>
<div class="flex-fill">Fill available space</div>html
<div class="flex-grow-0">不拉伸</div>
<div class="flex-grow-1">拉伸填充剩余空间</div>
<div class="flex-shrink-0">不收缩</div>
<div class="flex-shrink-1">允许收缩</div>
<div class="flex-fill">填充可用空间</div>Order
排列顺序
html
<div class="order-0">First</div>
<div class="order-1">Second</div>
<div class="order-2">Third</div>
<div class="order-first">Very first (-1)</div>
<div class="order-last">Very last (6)</div>html
<div class="order-0">第一个</div>
<div class="order-1">第二个</div>
<div class="order-2">第三个</div>
<div class="order-first">最前（-1）</div>
<div class="order-last">最后（6）</div>Background Utilities
背景工具类
html
<div class="bg-primary">Primary</div>
<div class="bg-secondary">Secondary</div>
<div class="bg-success">Success</div>
<div class="bg-danger">Danger</div>
<div class="bg-warning">Warning</div>
<div class="bg-info">Info</div>
<div class="bg-light">Light</div>
<div class="bg-dark">Dark</div>
<div class="bg-body">Body</div>
<div class="bg-body-secondary">Body secondary</div>
<div class="bg-body-tertiary">Body tertiary</div>
<div class="bg-white">White</div>
<div class="bg-black">Black</div>
<div class="bg-transparent">Transparent</div>
<!-- Opacity -->
<div class="bg-primary bg-opacity-75">75%</div>
<div class="bg-primary bg-opacity-50">50%</div>
<div class="bg-primary bg-opacity-25">25%</div>
<div class="bg-primary bg-opacity-10">10%</div>
<!-- Gradient -->
<div class="bg-primary bg-gradient">Gradient</div>html
<div class="bg-primary">主色调背景</div>
<div class="bg-secondary">次要色调背景</div>
<div class="bg-success">成功色调背景</div>
<div class="bg-danger">危险色调背景</div>
<div class="bg-warning">警告色调背景</div>
<div class="bg-info">信息色调背景</div>
<div class="bg-light">浅色背景</div>
<div class="bg-dark">深色背景</div>
<div class="bg-body">主体背景</div>
<div class="bg-body-secondary">次要主体背景</div>
<div class="bg-body-tertiary">三级主体背景</div>
<div class="bg-white">白色背景</div>
<div class="bg-black">黑色背景</div>
<div class="bg-transparent">透明背景</div>
<!-- 透明度 -->
<div class="bg-primary bg-opacity-75">75% 透明度</div>
<div class="bg-primary bg-opacity-50">50% 透明度</div>
<div class="bg-primary bg-opacity-25">25% 透明度</div>
<div class="bg-primary bg-opacity-10">10% 透明度</div>
<!-- 渐变背景 -->
<div class="bg-primary bg-gradient">渐变背景</div>Text Color Utilities
文本颜色工具类
html
<p class="text-primary">Primary text</p>
<p class="text-secondary">Secondary text</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>
<p class="text-warning">Warning text</p>
<p class="text-info">Info text</p>
<p class="text-muted">Muted text</p>
<p class="text-body">Body text</p>
<p class="text-body-secondary">Body secondary</p>
<p class="text-body-tertiary">Body tertiary</p>
<p class="text-body-emphasis">Body emphasis</p>
<p class="text-black">Black text</p>
<p class="text-white bg-dark">White text</p>
<!-- Opacity -->
<p class="text-primary text-opacity-75">75% opacity</p>
<p class="text-primary text-opacity-50">50% opacity</p>
<p class="text-primary text-opacity-25">25% opacity</p>html
<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-muted">弱化文本</p>
<p class="text-body">主体文本</p>
<p class="text-body-secondary">次要主体文本</p>
<p class="text-body-tertiary">三级主体文本</p>
<p class="text-body-emphasis">强调主体文本</p>
<p class="text-black">黑色文本</p>
<p class="text-white bg-dark">白色文本（深色背景）</p>
<!-- 透明度 -->
<p class="text-primary text-opacity-75">75% 透明度</p>
<p class="text-primary text-opacity-50">50% 透明度</p>
<p class="text-primary text-opacity-25">25% 透明度</p>Border Utilities
边框工具类
html
<!-- Add borders -->
<div class="border">All sides</div>
<div class="border-top">Top</div>
<div class="border-end">End</div>
<div class="border-bottom">Bottom</div>
<div class="border-start">Start</div>
<!-- Remove borders -->
<div class="border-0">No border</div>
<div class="border-top-0">No top border</div>
<!-- Border color -->
<div class="border border-primary">Primary</div>
<div class="border border-success">Success</div>
<div class="border border-danger">Danger</div>
<!-- Border width -->
<div class="border border-1">1px</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>
<!-- Border radius -->
<div class="rounded">Rounded</div>
<div class="rounded-0">No radius</div>
<div class="rounded-1">Small radius</div>
<div class="rounded-2">Default radius</div>
<div class="rounded-3">Large radius</div>
<div class="rounded-4">XL radius</div>
<div class="rounded-5">XXL radius</div>
<div class="rounded-circle">Circle</div>
<div class="rounded-pill">Pill</div>
<div class="rounded-top">Top only</div>
<div class="rounded-end">End only</div>
<div class="rounded-bottom">Bottom only</div>
<div class="rounded-start">Start only</div>html
<!-- 添加边框 -->
<div class="border">所有方向边框</div>
<div class="border-top">顶部边框</div>
<div class="border-end">结束方向边框</div>
<div class="border-bottom">底部边框</div>
<div class="border-start">起始方向边框</div>
<!-- 移除边框 -->
<div class="border-0">无边框</div>
<div class="border-top-0">无顶部边框</div>
<!-- 边框颜色 -->
<div class="border border-primary">主色调边框</div>
<div class="border border-success">成功色调边框</div>
<div class="border border-danger">危险色调边框</div>
<!-- 边框宽度 -->
<div class="border border-1">1px 边框</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="rounded">圆角</div>
<div class="rounded-0">无圆角</div>
<div class="rounded-1">小圆角</div>
<div class="rounded-2">默认圆角</div>
<div class="rounded-3">大圆角</div>
<div class="rounded-4">超大圆角</div>
<div class="rounded-5">特大圆角</div>
<div class="rounded-circle">圆形</div>
<div class="rounded-pill">胶囊形</div>
<div class="rounded-top">仅顶部圆角</div>
<div class="rounded-end">仅结束方向圆角</div>
<div class="rounded-bottom">仅底部圆角</div>
<div class="rounded-start">仅起始方向圆角</div>Shadow Utilities
阴影工具类
html
<div class="shadow-none">No shadow</div>
<div class="shadow-sm">Small shadow</div>
<div class="shadow">Regular shadow</div>
<div class="shadow-lg">Large shadow</div>html
<div class="shadow-none">无阴影</div>
<div class="shadow-sm">小阴影</div>
<div class="shadow">常规阴影</div>
<div class="shadow-lg">大阴影</div>Sizing Utilities
尺寸工具类
Width
宽度
html
<div class="w-25">25% width</div>
<div class="w-50">50% width</div>
<div class="w-75">75% width</div>
<div class="w-100">100% width</div>
<div class="w-auto">Auto width</div>
<div class="mw-100">Max-width 100%</div>
<div class="vw-100">100vw</div>
<div class="min-vw-100">Min 100vw</div>html
<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="w-auto">自动宽度</div>
<div class="mw-100">最大宽度 100%</div>
<div class="vw-100">100vw</div>
<div class="min-vw-100">最小宽度 100vw</div>Height
高度
html
<div class="h-25">25% height</div>
<div class="h-50">50% height</div>
<div class="h-75">75% height</div>
<div class="h-100">100% height</div>
<div class="h-auto">Auto height</div>
<div class="mh-100">Max-height 100%</div>
<div class="vh-100">100vh</div>
<div class="min-vh-100">Min 100vh</div>html
<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="h-auto">自动高度</div>
<div class="mh-100">最大高度 100%</div>
<div class="vh-100">100vh</div>
<div class="min-vh-100">最小高度 100vh</div>Position Utilities
定位工具类
Position Values
定位类型
html
<div class="position-static">Static (default)</div>
<div class="position-relative">Relative</div>
<div class="position-absolute">Absolute</div>
<div class="position-fixed">Fixed</div>
<div class="position-sticky">Sticky</div>html
<div class="position-static">静态定位（默认）</div>
<div class="position-relative">相对定位</div>
<div class="position-absolute">绝对定位</div>
<div class="position-fixed">固定定位</div>
<div class="position-sticky">粘性定位</div>Placement
定位位置
html
<!-- Edge positioning (0%, 50%, 100%) -->
<div class="position-absolute top-0 start-0">Top left</div>
<div class="position-absolute top-0 end-0">Top right</div>
<div class="position-absolute bottom-0 start-0">Bottom left</div>
<div class="position-absolute bottom-0 end-0">Bottom right</div>
<div class="position-absolute top-50 start-50">Center (needs transform)</div>html
<!-- 边缘定位（0%, 50%, 100%） -->
<div class="position-absolute top-0 start-0">左上角</div>
<div class="position-absolute top-0 end-0">右上角</div>
<div class="position-absolute bottom-0 start-0">左下角</div>
<div class="position-absolute bottom-0 end-0">右下角</div>
<div class="position-absolute top-50 start-50">居中（需配合变换）</div>Centering with Translate
变换居中
html
<!-- Center an element -->
<div class="position-absolute top-50 start-50 translate-middle">
Perfectly centered
</div>
<!-- Center horizontally only -->
<div class="position-absolute start-50 translate-middle-x">
Horizontally centered
</div>
<!-- Center vertically only -->
<div class="position-absolute top-50 translate-middle-y">
Vertically centered
</div>html
<!-- 元素完全居中 -->
<div class="position-absolute top-50 start-50 translate-middle">
完美居中
</div>
<!-- 仅水平居中 -->
<div class="position-absolute start-50 translate-middle-x">
水平居中
</div>
<!-- 仅垂直居中 -->
<div class="position-absolute top-50 translate-middle-y">
垂直居中
</div>Common Pattern: Badge Positioning
常见场景：徽章定位
html
<button class="btn btn-primary position-relative">
Notifications
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
</span>
</button>html
<button class="btn btn-primary position-relative">
通知
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
</span>
</button>Overflow Utilities
溢出工具类
html
<div class="overflow-auto">Auto</div>
<div class="overflow-hidden">Hidden</div>
<div class="overflow-visible">Visible</div>
<div class="overflow-scroll">Scroll</div>
<div class="overflow-x-auto">Horizontal auto</div>
<div class="overflow-x-hidden">Horizontal hidden</div>
<div class="overflow-y-auto">Vertical auto</div>
<div class="overflow-y-hidden">Vertical hidden</div>html
<div class="overflow-auto">自动溢出</div>
<div class="overflow-hidden">隐藏溢出</div>
<div class="overflow-visible">显示溢出</div>
<div class="overflow-scroll">滚动溢出</div>
<div class="overflow-x-auto">水平方向自动溢出</div>
<div class="overflow-x-hidden">水平方向隐藏溢出</div>
<div class="overflow-y-auto">垂直方向自动溢出</div>
<div class="overflow-y-hidden">垂直方向隐藏溢出</div>Opacity Utilities
透明度工具类
html
<div class="opacity-100">100%</div>
<div class="opacity-75">75%</div>
<div class="opacity-50">50%</div>
<div class="opacity-25">25%</div>
<div class="opacity-0">0%</div>html
<div class="opacity-100">100% 透明度</div>
<div class="opacity-75">75% 透明度</div>
<div class="opacity-50">50% 透明度</div>
<div class="opacity-25">25% 透明度</div>
<div class="opacity-0">0% 透明度</div>Visibility Utilities
可见性工具类
html
<div class="visible">Visible</div>
<div class="invisible">Invisible (takes space)</div>html
<div class="visible">可见</div>
<div class="invisible">不可见（仍占据空间）</div>Z-Index Utilities
Z轴层级工具类
html
<div class="z-n1">-1</div>
<div class="z-0">0</div>
<div class="z-1">1</div>
<div class="z-2">2</div>
<div class="z-3">3</div>html
<div class="z-n1">-1</div>
<div class="z-0">0</div>
<div class="z-1">1</div>
<div class="z-2">2</div>
<div class="z-3">3</div>Object Fit Utilities
对象适配工具类
html
<img class="object-fit-contain" src="...">
<img class="object-fit-cover" src="...">
<img class="object-fit-fill" src="...">
<img class="object-fit-scale" src="...">
<img class="object-fit-none" src="...">html
<img class="object-fit-contain" src="...">
<img class="object-fit-cover" src="...">
<img class="object-fit-fill" src="...">
<img class="object-fit-scale" src="...">
<img class="object-fit-none" src="...">Interaction Utilities
交互工具类
html
<div class="user-select-all">Select all on click</div>
<div class="user-select-auto">Default selection</div>
<div class="user-select-none">Cannot select</div>
<div class="pe-none">Pointer events none</div>
<div class="pe-auto">Pointer events auto</div>html
<div class="user-select-all">点击全选</div>
<div class="user-select-auto">默认选择行为</div>
<div class="user-select-none">无法选中</div>
<div class="pe-none">无指针事件</div>
<div class="pe-auto">自动指针事件</div>Float Utilities
浮动工具类
Float utilities position elements to the left or right of their container, allowing text to wrap around them.
html
<div class="float-start">Float start (left in LTR)</div>
<div class="float-end">Float end (right in LTR)</div>
<div class="float-none">No float</div>
<!-- Responsive floats -->
<div class="float-sm-start">Float start on sm+</div>
<div class="float-md-end">Float end on md+</div>
<div class="float-lg-none">No float on lg+</div>| Class | Description |
|---|---|
| Float left (LTR) |
| Float right (LTR) |
| Remove float |
Responsive:
float-{breakpoint}-{start|end|none}Note: Modern layouts typically use flexbox or grid instead of floats. Floats remain useful for wrapping text around images.
浮动工具类可将元素定位在容器的左侧或右侧，允许文本环绕元素。
html
<div class="float-start">起始方向浮动（LTR 布局中为左侧）</div>
<div class="float-end">结束方向浮动（LTR 布局中为右侧）</div>
<div class="float-none">不浮动</div>
<!-- 响应式浮动 -->
<div class="float-sm-start">sm 尺寸以上起始方向浮动</div>
<div class="float-md-end">md 尺寸以上结束方向浮动</div>
<div class="float-lg-none">lg 尺寸以上不浮动</div>| 类名 | 描述 |
|---|---|
| 左侧浮动（LTR 布局） |
| 右侧浮动（LTR 布局） |
| 取消浮动 |
响应式格式：
float-{breakpoint}-{start|end|none}注意：现代布局通常使用弹性盒或网格替代浮动。浮动仍适用于文本环绕图片的场景。
Vertical Align Utilities
垂直对齐工具类
Control vertical alignment of inline, inline-block, inline-table, and table cell elements.
html
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>| Class | Alignment |
|---|---|
| Baseline (default) |
| Top of line |
| Middle of line |
| Bottom of line |
| Top of parent's font |
| Bottom of parent's font |
Note: These work on inline/inline-block elements and table cells, not block elements. For block vertical alignment, use flexbox ().
align-items-*控制行内元素、行内块元素、行内表格元素和表格单元格的垂直对齐方式。
html
<span class="align-baseline">基线对齐</span>
<span class="align-top">顶部对齐</span>
<span class="align-middle">中间对齐</span>
<span class="align-bottom">底部对齐</span>
<span class="align-text-top">文本顶部对齐</span>
<span class="align-text-bottom">文本底部对齐</span>| 类名 | 对齐方式 |
|---|---|
| 基线对齐（默认） |
| 行顶部对齐 |
| 行中间对齐 |
| 行底部对齐 |
| 父元素字体顶部对齐 |
| 父元素字体底部对齐 |
注意：这些类仅适用于行内/行内块元素和表格单元格，不适用于块级元素。块级元素的垂直对齐请使用弹性盒的 类。
align-items-*Link Utilities
链接工具类
Style links with opacity, underline color, offset, and hover effects. Added in Bootstrap 5.3.
html
<!-- Link opacity -->
<a href="#" class="link-opacity-10">10% opacity</a>
<a href="#" class="link-opacity-25">25% opacity</a>
<a href="#" class="link-opacity-50">50% opacity</a>
<a href="#" class="link-opacity-75">75% opacity</a>
<a href="#" class="link-opacity-100">100% opacity</a>
<!-- Hover opacity -->
<a href="#" class="link-opacity-50-hover">50% on hover</a>
<!-- Underline color -->
<a href="#" class="link-underline-primary">Primary underline</a>
<a href="#" class="link-underline-secondary">Secondary underline</a>
<a href="#" class="link-underline-success">Success underline</a>
<!-- Underline offset -->
<a href="#" class="link-offset-1">1 offset</a>
<a href="#" class="link-offset-2">2 offset</a>
<a href="#" class="link-offset-3">3 offset</a>
<!-- Underline opacity -->
<a href="#" class="link-underline-opacity-0">No underline</a>
<a href="#" class="link-underline-opacity-25">25% underline</a>
<a href="#" class="link-underline-opacity-50">50% underline</a>
<!-- Combined styling -->
<a href="#" class="link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">
Styled link
</a>| Class | Description |
|---|---|
| Link text opacity |
| Opacity on hover |
| Underline color |
| Underline distance |
| Underline opacity |
为链接设置透明度、下划线颜色、偏移量和悬停效果。Bootstrap 5.3 新增功能。
html
<!-- 链接透明度 -->
<a href="#" class="link-opacity-10">10% 透明度</a>
<a href="#" class="link-opacity-25">25% 透明度</a>
<a href="#" class="link-opacity-50">50% 透明度</a>
<a href="#" class="link-opacity-75">75% 透明度</a>
<a href="#" class="link-opacity-100">100% 透明度</a>
<!-- 悬停透明度 -->
<a href="#" class="link-opacity-50-hover">悬停时 50% 透明度</a>
<!-- 下划线颜色 -->
<a href="#" class="link-underline-primary">主色调下划线</a>
<a href="#" class="link-underline-secondary">次要色调下划线</a>
<a href="#" class="link-underline-success">成功色调下划线</a>
<!-- 下划线偏移量 -->
<a href="#" class="link-offset-1">偏移量 1</a>
<a href="#" class="link-offset-2">偏移量 2</a>
<a href="#" class="link-offset-3">偏移量 3</a>
<!-- 下划线透明度 -->
<a href="#" class="link-underline-opacity-0">无下划线</a>
<a href="#" class="link-underline-opacity-25">25% 透明度下划线</a>
<a href="#" class="link-underline-opacity-50">50% 透明度下划线</a>
<!-- 组合样式 -->
<a href="#" class="link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">
自定义样式链接
</a>| 类名 | 描述 |
|---|---|
| 链接文本透明度 |
| 悬停时透明度 |
| 下划线颜色 |
| 下划线与文本的距离 |
| 下划线透明度 |
Utilities API
工具类 API
Bootstrap's utilities are generated via a Sass-based API, allowing full customization.
Bootstrap 的工具类基于 Sass API 生成，支持完全自定义。
API Structure
API 结构
Each utility is defined as a map with these key options:
| Option | Description |
|---|---|
| CSS property name (required) |
| List or map of values (required) |
| Custom class prefix (optional) |
| Generate responsive variants (default: false) |
| Generate print variants (default: false) |
| Generate state variants like |
| Output as CSS variables instead of rules |
| Custom CSS variable name (with css-var) |
| Map of local CSS variables |
| Enable fluid rescaling (default: false) |
| Include in RTL output (default: true) |
Note: All utilities include by default. Disable globally with .
!important$enable-important-utilities: false每个工具类通过以下键值对定义：
| 选项 | 描述 |
|---|---|
| CSS 属性名（必填） |
| 值列表或映射（必填） |
| 自定义类前缀（可选） |
| 是否生成响应式变体（默认：false） |
| 是否生成打印变体（默认：false） |
| 是否生成状态变体（如 |
| 是否输出为 CSS 变量而非规则 |
| 自定义 CSS 变量名（配合 css-var 使用） |
| 本地 CSS 变量映射 |
| 是否启用流体缩放（默认：false） |
| 是否包含在 RTL 输出中（默认：true） |
注意：所有工具类默认包含 。可通过全局设置 禁用。
!important$enable-important-utilities: falseAdding Custom Utilities
添加自定义工具类
scss
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
responsive: true,
values: auto pointer grab grabbing not-allowed
)
)
);
@import "bootstrap/scss/utilities/api";scss
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
responsive: true,
values: auto pointer grab grabbing not-allowed
)
)
);
@import "bootstrap/scss/utilities/api";Modifying Existing Utilities
修改现有工具类
scss
// Add responsive variants to an existing utility
$utilities: map-merge(
$utilities,
(
"overflow": map-merge(
map-get($utilities, "overflow"),
(responsive: true)
)
)
);scss
// 为现有工具类添加响应式变体
$utilities: map-merge(
$utilities,
(
"overflow": map-merge(
map-get($utilities, "overflow"),
(responsive: true)
)
)
);Removing Utilities
移除工具类
scss
// Remove entirely
$utilities: map-remove($utilities, "float");
// Or set to null
$utilities: map-merge($utilities, ("float": null));scss
// 完全移除
$utilities: map-remove($utilities, "float");
// 或设置为 null
$utilities: map-merge($utilities, ("float": null));Common Patterns
常见布局模式
Frequently-used utility combinations for real-world scenarios.
实际开发中常用的工具类组合场景。
Centered Container (Full Viewport)
全屏居中容器
html
<div class="d-flex justify-content-center align-items-center min-vh-100">
<div class="text-center">
<h1>Perfectly Centered</h1>
<p>Both horizontally and vertically</p>
</div>
</div>html
<div class="d-flex justify-content-center align-items-center min-vh-100">
<div class="text-center">
<h1>完美居中</h1>
<p>水平和垂直方向均居中</p>
</div>
</div>Sticky Footer Layout
粘性页脚布局
html
<div class="d-flex flex-column min-vh-100">
<header class="bg-dark text-white p-3">Header</header>
<main class="flex-grow-1 p-3">Main content</main>
<footer class="bg-body-secondary p-3">Footer stays at bottom</footer>
</div>html
<div class="d-flex flex-column min-vh-100">
<header class="bg-dark text-white p-3">页头</header>
<main class="flex-grow-1 p-3">主内容</main>
<footer class="bg-body-secondary p-3">页脚固定在底部</footer>
</div>Card with Spacing and Shadow
带间距和阴影的卡片
html
<div class="card shadow-sm border-0 rounded-3">
<div class="card-body p-4">
<h5 class="card-title mb-3">Title</h5>
<p class="card-text text-muted mb-0">Content</p>
</div>
</div>html
<div class="card shadow-sm border-0 rounded-3">
<div class="card-body p-4">
<h5 class="card-title mb-3">标题</h5>
<p class="card-text text-muted mb-0">内容</p>
</div>
</div>Responsive Hide/Show
响应式显示/隐藏
html
<!-- Hidden on mobile, visible on desktop -->
<div class="d-none d-md-block">Desktop only</div>
<!-- Visible on mobile, hidden on desktop -->
<div class="d-block d-md-none">Mobile only</div>html
<!-- 移动端隐藏，桌面端可见 -->
<div class="d-none d-md-block">仅桌面端可见</div>
<!-- 移动端可见，桌面端隐藏 -->
<div class="d-block d-md-none">仅移动端可见</div>Icon + Text Alignment
图标与文本对齐
html
<div class="d-flex align-items-center gap-2">
<svg>...</svg>
<span>Text aligned with icon</span>
</div>html
<div class="d-flex align-items-center gap-2">
<svg>...</svg>
<span>与图标对齐的文本</span>
</div>When to Use Utilities vs Custom CSS
工具类 vs 自定义 CSS 的使用场景
| Scenario | Recommended Approach |
|---|---|
| One-off spacing adjustment | Utility classes ( |
| Consistent component styling | Custom component class |
| Responsive show/hide | Display utilities ( |
| Complex hover/focus states | Custom CSS |
| Values not in Bootstrap scale | Extend via Utilities API or custom CSS |
| Repeated pattern (3+ times) | Extract to custom class |
| Quick prototype | Utilities for speed |
| Production component | Consider extracting repeated utilities |
Rule of thumb: If you're applying the same combination of 4+ utilities to multiple elements, consider creating a custom class.
| 场景 | 推荐方案 |
|---|---|
| 一次性间距调整 | 使用工具类（如 |
| 组件统一样式 | 自定义组件类 |
| 响应式显示/隐藏 | 使用显示工具类（如 |
| 复杂悬停/聚焦状态 | 自定义 CSS |
| Bootstrap 比例中没有的值 | 通过工具类 API 扩展或自定义 CSS |
| 重复使用 3 次以上的样式组合 | 提取为自定义类 |
| 快速原型开发 | 使用工具类提升效率 |
| 生产环境组件 | 考虑提取重复使用的工具类组合 |
经验法则：如果同一个工具类组合应用在 4 个及以上元素上，建议创建自定义类。
Additional Resources
额外资源
Reference Files
参考文档
- - Complete utility class reference
references/utilities-reference.md - - Advanced Sass customization examples
references/api-customization.md
- - 完整工具类参考
references/utilities-reference.md - - Sass 高级自定义示例
references/api-customization.md
Example Files
示例文件
- - Card styling with spacing, shadows, and borders
examples/card-layout.html - - Responsive display and spacing patterns
examples/responsive-utilities.html - - Flexbox centering techniques
examples/flex-centering.html
- - 使用间距、阴影和边框的卡片样式
examples/card-layout.html - - 响应式显示和间距模式
examples/responsive-utilities.html - - 弹性盒居中技巧
examples/flex-centering.html