首页分享 Bootstrap5 卡片

Bootstrap5 卡片

来源：花匠小妙招时间：2025-07-28 17:17

https://getbootstrap.com/docs/5.3/components/card/

卡片是一种灵活且可扩展的内容容器。它包括了头部和尾部的选项，各种各样的内容，上下文背景颜色，以及强大的显示选项。
可以通过.card 与 .card-body类快速创建一个简单的卡片。

创建基本的卡片

外部包装器需要基类.card，而内容可以放置在 .card-body类修饰的元素内。

例如：

在这里插入图片描述

设置卡片固定的宽度：
在这里插入图片描述

完整示例：

在这里插入图片描述

页眉和页脚

https://getbootstrap.com/docs/5.3/components/card/#header-and-footer

通过.card-header类添加页眉，.card-footer类添加页脚。

例如：

在这里插入图片描述

带有标题、文本和链接的卡片

在这里插入图片描述

卡片图像

https://getbootstrap.com/docs/5.3/components/card/#images

可以给<img>元素添加.card-img-top 类，使图片位于文字上方，添加.card-img-bottom类使图片位于文字下方。

例如：

在这里插入图片描述

图像作为卡片背景

https://getbootstrap.com/docs/5.3/components/card/#image-overlays

将图像转换为卡片的背景，并使用.card-img-overlay类叠加卡片的文字。

例如：

在这里插入图片描述

设置卡片的背景颜色

在这里插入图片描述

在卡片中添加列表组

在这里插入图片描述

卡片组

https://getbootstrap.com/docs/5.3/components/card/#card-groups

例如：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"> </head> <body> <div class="container"> <div class="card-group"> <div class="card bg-primary" style="width: 300px;"> <div class="card-header">这是页眉</div> <div class="card-body"> <h4 class="card-title">卡片标题</h4> <p class="card-text">卡片的文本</p> <a href="#" class="card-link">卡片链接</a> </div> <div class="card-footer">这是页脚</div> </div> <div class="card bg-success" style="width: 300px;"> <div class="card-header">这是页眉</div> <div class="card-body"> <h4 class="card-title">卡片标题</h4> <p class="card-text">卡片的文本</p> <a href="#" class="card-link">卡片链接</a> </div> <div class="card-footer">这是页脚</div> </div> <div class="card bg-info" style="width: 300px;"> <div class="card-header">这是页眉</div> <div class="card-body"> <h4 class="card-title">卡片标题</h4> <p class="card-text">卡片的文本</p> <a href="#" class="card-link">卡片链接</a> </div> <div class="card-footer">这是页脚</div> </div> </div> </div> <script src="bootstrap5/js/bootstrap.bundle.min.js"></script> </body> </html>

在这里插入图片描述