卡片 Cards
卡片是一个内容容器，集合了图片、文本、列表组与页脚等多种结构，兼具弹性与可扩展性，广泛用于文章摘要、商品展示与信息面板。
基础卡片
最基础的卡片由 card-body 内的标题、文本与按钮组成；用内联 style="width:18rem" 限定卡片宽度。
HTML 示例
图片顶部
用 card-img-top 在卡片顶部放置图片。本页以渐变色块代替外部图片，真实项目中把色块换成 <img> 即可。
占位图片
HTML 示例
列表组卡片
卡片内嵌入 list-group，加上 list-group-flush 让列表项贴合卡片边缘，形成目录式卡片。
HTML 示例
横向图文卡片
使用 Flex 布局 flex-row 让图文左右排列：左侧色块代替图片，右侧为正文，窄屏下自动上下堆叠。
图文
横向卡片标题
这是一张较宽的卡片，左侧配图、右侧正文。窄屏下 Flex 自动改为纵向堆叠，移动端无需额外处理。
上次更新于 3 分钟前
HTML 示例
背景色与边框
用 text-bg-* 系列类快速给卡片上色；浅色卡片搭配 border-* 边框类保证边界清晰。
主要色卡片
text-bg-primary 自动配好对比文字。
成功色卡片
用于提示操作已完成等正面信息。
危险色边框
白底配红色边框与红色文字，突出警示信息。
警告色边框
警告信息常用，需要时可加 border 让卡片轮廓可见。
HTML 示例
网格布局
配合网格的 row-cols-* 类控制每行卡片数量；加 h-100 让同行卡片等高。
封面一
卡片一
一张更长的卡片，附带支持文字作为补充内容的自然引语。
封面二
卡片二
较短的卡片，但因为 h-100，高度仍与邻居拉齐。
封面三
卡片三
row-cols-md-2 表示中等及以上屏幕每行两张卡片，小屏自动堆叠为一列。
封面四
卡片四
调整为 row-cols-md-3，第四张卡片就会换行。
HTML 示例