Bootstrap 5-卡片

卡片容器

 • card

代码图

---

卡片页眉

 • card-header

代码图

---

卡片主体

 • card-body

代码图

---

卡片标题

 • card-title

代码图

---

卡片文本

 • card-text

代码图

---

卡片链接

 • card-link

代码图

---

卡片页脚

 • card-footer

代码图

基本的卡片

代码图

效果图

卡片颜色

注意！卡片颜色使用的对象有：卡片容器、卡片页眉、卡片主体、卡片文本、卡片链接、卡片页脚。

 • bg（默认，白色）

 • bg-primary（蓝色）

 • bg-success（绿色）

 • bg-info（天蓝色）

 • bg-warning（黄色）

 • bg-danger（红色）

 • bg-secondary（灰色）

 • bg-dark（黑色）

 • bg-light（浅白色）

所有卡片颜色的效果图

 代码图

效果图

卡片文本颜色

注意！卡片文本颜色使用的对象有：卡片容器、卡片页眉、卡片主体、卡片文本、卡片链接、卡片页脚。

 • text-（默认，黑色）

 • text-muted（静音，灰色）

 • text-primary（重要，蓝色）

 • text-success（成功，绿色）

 • text-info（代表了一些信息，天蓝色）

 • text-warning（警告，黄色）

 • text-danger（危险，红色）

 • text-secondary（次要文本，灰色）

 • text-white（白色）

 • text-dark（深灰色）

 • text-body（默认主体颜色：黑色）

 • text-light（浅灰色）

所有的文本颜色的效果图

 代码图

效果图

卡片图像位置

 • card-img-top（卡片图像顶部）

代码图

效果图

---

• card-img-button（卡片图像底部）

代码图

效果图

卡片图像与文本叠加

 • card-img-overlay

代码图

效果图