Bootstrap卡片遮罩必须用.card与.card-img-overlay直接组合，图片需为.card-img-top或.card-img，.card-img-overlay须为.card直接子元素且紧邻图片；图标用Bootstrap图标或内联SVG，标题用.card-title，布局用.d-flex+垂直居中类，响应式通过断点类控制显隐与尺寸，并为img添加loading="lazy"和decoding="async"。
卡片结构必须用 .card + .card-img-overlay 组合
Bootstrap 的响应式卡片遮罩不是靠 CSS 覆盖层模拟，而是依赖内置的语义化结构。直接在 .card 内放图片再叠 div 做遮罩，会破坏响应行为（比如图片不随屏幕缩放、文字错位）。正确路径是：图片作为 .card-img-top 或 .card-img，标题和图标放在 .card-img-overlay 里——这个类自带 position: absolute 和 inset: 0，且已适配移动端断点下的 padding 和 font-size。
常见错误：.card-img-overlay 放在图片外部、或嵌套在 .card-body 里，会导致定位失效或遮罩被裁切。
-
.card-img-overlay必须是.card的**直接子元素**，且紧挨着图片元素（.card-img-top或.card-img） - 图标必须用 Bootstrap 图标（
<i class="bi bi-xxx"></i>）或 SVG 内联，不能用背景图——否则无法响应缩放 - 文字标题建议用
<h5 class="card-title">，它自带移动端行高和字号响应逻辑
图标+标题遮罩需用 .d-flex + .align-items-center 控制垂直居中
纯 CSS 的 top: 50%; transform: translateY(-50%) 在小屏下容易溢出或截断，Bootstrap 推荐用 Flex 布局。因为 .card-img-overlay 默认是 position: relative 容器，内部用 .d-flex.flex-column.h-100 包裹内容，再用 .justify-content-center 垂直居中，能自动适配不同图片高度变化。
注意：不要给遮罩内文字设固定 height 或 line-height，否则在 sm 断点下文字会被压扁或换行异常。
- 图标用
<i class="bi bi-lightning-fill fs-1"></i>，fs-1到fs-5是响应式字体大小类，比写font-size: 1.5rem更可靠 - 标题文字加
text-white和text-shadow（如text-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.5)），避免浅色图上文字不可读 - 如果图标和标题要左右排列（比如左图标右标题），改用
.d-flex.align-items-center+.gap-2
响应式断点要主动控制遮罩内容显隐和尺寸
Bootstrap 不会自动隐藏遮罩里的图标或缩小标题字体到合理范围——你得自己加断点类。例如大屏显示完整图标+标题，中屏只留图标，小屏完全隐藏图标只留标题，这是真实项目里最常被忽略的细节。
错误做法是写媒体查询覆盖，这会绕过 Bootstrap 的断点系统，导致和 .col-md-6 等类冲突。
- 图标显隐：用
d-none d-md-inline-block（小屏隐藏，中屏起显示）或d-none d-lg-block（仅大屏显示） - 标题字号：组合使用
fs-4 fs-lg-5 fs-xl-6，注意fs-*类在xs下默认是fs-4，无需重复写 - 遮罩内边距：用
px-3 px-md-4 py-2 py-md-3，避免小屏下文字贴边
img 标签必须带 loading="lazy" 和 decoding="async"
带图标的卡片常被用于瀑布流或列表页，图片加载性能直接影响首屏体验。Bootstrap 自身不处理图片懒加载，但现代浏览器对 loading="lazy" 支持良好；而 decoding="async" 能防止图片解码阻塞主线程——尤其当卡片数量多、图标是 SVG 或小 PNG 时，这点极易被忽略。
不加这两个属性，滚动时会出现明显卡顿，且 Lighthouse 性能评分掉 10+ 分。
-
<img src="..." class="card-img-top" alt="..." loading="lazy" decoding="async">是最低要求 - 如果图标是独立
<svg>，确保width和height设为1em或用flex-shrink-0防止压缩变形 - 避免在
.card-img-overlay里用background-image加载图标——无法响应式缩放，也不支持懒加载
object-fit: cover + 固定容器 height 控制，或者接受部分裁切。 
