何雨果的知识库

Appearance

Bootstrap 工具类 ​

FrameworkCSS Utilities

Bootstrap 提供大量 工具类（Utility Classes），用于在 HTML 中快速微调样式，无需编写额外的 CSS。工具类遵循统一的命名规则，简洁且直观。

一、📐 间距（Spacing） ​

1.1 命名规则 ​

{属性}{方向}-{断点}-{大小}
部分说明可选值
属性margin 或 paddingm（margin）/ p（padding）
方向应用的方向t b s e x y 或留空
断点响应式断点（可选）sm md lg xl xxl
大小间距尺寸0 ~ 5 或 auto

1.2 方向详解 ​

方向含义CSS 属性
ttopmargin-top / padding-top
bbottommargin-bottom / padding-bottom
sstart（LTR 中为 left）margin-left / padding-left
eend（LTR 中为 right）margin-right / padding-right
x水平（left + right）两侧
y垂直（top + bottom）上下
留空四边全部

1.3 大小对照 ​

类后缀值等价
000
10.25rem4px
20.5rem8px
31rem16px
41.5rem24px
53rem48px
autoauto仅 margin 可用

1.4 示例 ​

html
<!-- 上边距 3（1rem） -->
<div class="mt-3">...</div>

<!-- 水平内边距 4（1.5rem） -->
<div class="px-4">...</div>

<!-- 下边距 5（3rem） -->
<div class="mb-5">...</div>

<!-- 四边为 0 -->
<div class="m-0 p-0">...</div>

<!-- 水平居中（需要固定宽度） -->
<div class="mx-auto" style="width: 200px;">居中</div>

<!-- 响应式：仅在 md 及以上应用 -->
<div class="mt-md-5 mt-2">...</div>

1.5 负 Margin ​

html
<!-- 负上边距 -->
<div class="mt-n3">向上拉 1rem</div>

二、📺 显示（Display） ​

2.1 基本显示 ​

html
<div class="d-block">块级元素</div>
<span class="d-inline">行内元素</span>
<div class="d-inline-block">行内块</div>
<div class="d-flex">Flex 容器</div>
<div class="d-grid">Grid 容器</div>
<div class="d-none">隐藏</div>

2.2 响应式显示/隐藏 ​

html
<!-- 手机隐藏，平板及以上显示 -->
<div class="d-none d-md-block">仅平板+</div>

<!-- 仅在手机上显示 -->
<div class="d-block d-md-none">仅手机</div>

<!-- 手机隐藏，桌面显示为 flex -->
<div class="d-none d-lg-flex">桌面 Flex</div>
类效果
d-none隐藏（所有尺寸）
d-sm-none≥576px 时隐藏
d-md-block≥768px 时显示为 block
d-lg-flex≥992px 时显示为 flex

2.3 打印显示 ​

html
<div class="d-print-none">打印时隐藏</div>
<div class="d-none d-print-block">仅打印时显示</div>

三、📐 Flex 工具类 ​

Bootstrap 提供完整的 Flex 工具类，无需写 CSS：

3.1 方向 ​

html
<div class="d-flex flex-row">水平（默认）</div>
<div class="d-flex flex-column">垂直</div>
<div class="d-flex flex-row-reverse">反向水平</div>

3.2 对齐 ​

html
<!-- 主轴对齐 -->
<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>

<!-- 交叉轴对齐 -->
<div class="d-flex align-items-center" style="height: 200px;">垂直居中</div>
<div class="d-flex align-items-start">顶部对齐</div>
<div class="d-flex align-items-end">底部对齐</div>
<div class="d-flex align-items-stretch">拉伸填满</div>

3.3 单项对齐 ​

html
<div class="d-flex">
  <div class="align-self-start">顶部</div>
  <div class="align-self-center">居中</div>
  <div class="align-self-end">底部</div>
</div>

3.4 换行 ​

html
<div class="d-flex flex-wrap">允许换行</div>
<div class="d-flex flex-nowrap">不换行</div>

3.5 间距与增长 ​

html
<div class="d-flex gap-3">项目间距 1rem</div>
<div class="d-flex">
  <div class="flex-grow-1">占据剩余空间</div>
  <div class="flex-shrink-0">不收缩</div>
</div>

3.6 垂直 + 水平居中（最常用模式） ​

html
<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
  <div>完美居中的内容</div>
</div>

四、🔤 文本（Typography） ​

4.1 对齐 ​

html
<p class="text-start">左对齐</p>
<p class="text-center">居中</p>
<p class="text-end">右对齐</p>

<!-- 响应式对齐 -->
<p class="text-center text-lg-start">手机居中，桌面左对齐</p>

4.2 字重与样式 ​

html
<p class="fw-bold">粗体</p>
<p class="fw-semibold">半粗</p>
<p class="fw-normal">常规</p>
<p class="fw-light">细体</p>
<p class="fst-italic">斜体</p>
<p class="fst-normal">正常（取消斜体）</p>

4.3 字号 ​

html
<p class="fs-1">fs-1（2.5rem）</p>
<p class="fs-2">fs-2（2rem）</p>
<p class="fs-3">fs-3（1.75rem）</p>
<p class="fs-4">fs-4（1.5rem）</p>
<p class="fs-5">fs-5（1.25rem）</p>
<p class="fs-6">fs-6（1rem）</p>

4.4 行高与装饰 ​

html
<p class="lh-1">行高 1</p>
<p class="lh-sm">小行高</p>
<p class="lh-base">默认行高</p>
<p class="lh-lg">大行高</p>

<p class="text-decoration-underline">下划线</p>
<p class="text-decoration-line-through">删除线</p>
<a class="text-decoration-none" href="#">无下划线链接</a>

4.5 文本换行与截断 ​

html
<p class="text-wrap">允许换行（默认）</p>
<p class="text-nowrap">不换行</p>
<p class="text-truncate" style="width: 200px;">
  超长文本会被截断并显示省略号...
</p>

4.6 大小写 ​

html
<p class="text-lowercase">ALL LOWERCASE</p>
<p class="text-uppercase">uppercase text</p>
<p class="text-capitalize">capitalize text</p>

五、🎨 颜色（Colors） ​

5.1 文字颜色 ​

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>
<p class="text-muted">灰色（弱化）</p>
<p class="text-body">默认文字色</p>
<p class="text-body-secondary">次要文字色</p>
<p class="text-white bg-dark">白色文字</p>

5.2 背景颜色 ​

html
<div class="bg-primary text-white">蓝色背景</div>
<div class="bg-success text-white">绿色背景</div>
<div class="bg-danger text-white">红色背景</div>
<div class="bg-warning text-dark">黄色背景</div>
<div class="bg-light text-dark">浅色背景</div>
<div class="bg-dark text-white">深色背景</div>
<div class="bg-transparent">透明背景</div>

5.3 透明度 ​

html
<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>

六、🔲 边框与圆角 ​

6.1 边框 ​

html
<!-- 添加边框 -->
<div class="border">四边边框</div>
<div class="border-top">仅上边框</div>
<div class="border-bottom">仅下边框</div>

<!-- 边框颜色 -->
<div class="border border-primary">蓝色边框</div>
<div class="border border-danger">红色边框</div>

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

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

6.2 圆角 ​

html
<div class="rounded">默认圆角</div>
<div class="rounded-0">无圆角</div>
<div class="rounded-1">小圆角</div>
<div class="rounded-3">大圆角</div>
<div class="rounded-circle">圆形（需等宽高）</div>
<div class="rounded-pill">药丸形</div>
<div class="rounded-top">仅上方圆角</div>

七、🌫️ 阴影（Shadows） ​

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

八、📏 尺寸（Sizing） ​

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="h-50">高 50%</div>
<div class="h-100">高 100%</div>

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

九、📍 定位（Position） ​

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>

<!-- 位移 -->
<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 top-50 start-50 translate-middle">正中心</div>

十、📊 Z-index 层级系统 ​

Bootstrap 为常见 UI 组件预定义了 z-index 值：

组件z-index说明
Dropdown1000下拉菜单
Sticky1020粘性元素
Fixed1030固定元素（导航栏）
Offcanvas Backdrop1040侧滑面板背景
Offcanvas1045侧滑面板
Modal Backdrop1050模态框背景遮罩
Modal1055模态框
Popover1070弹出框
Tooltip1080工具提示
Toast1090消息提示

使用内置值

自定义元素的 z-index 时，参照上表避免与 Bootstrap 组件冲突。

十一、🔧 其他实用工具类 ​

11.1 溢出 ​

html
<div class="overflow-auto">自动滚动条</div>
<div class="overflow-hidden">隐藏溢出</div>
<div class="overflow-visible">显示溢出</div>
<div class="overflow-scroll">始终显示滚动条</div>

11.2 可见性 ​

html
<div class="visible">可见（占用空间）</div>
<div class="invisible">不可见（仍占用空间）</div>
<!-- vs d-none：不可见且不占用空间 -->

11.3 交互 ​

html
<p class="user-select-all">点击全选文字</p>
<p class="user-select-none">不可选文字</p>
<a class="pe-none">不可点击的链接</a>
<a class="pe-auto">可点击的链接</a>

十二、📚 参考资源 ​

← 返回 Web 开发研究