BS5 卡片
创建于 2024-12-03 /
18
字体：
[默认]
[大]
[更大]
卡片
Bootstrap 5 中的卡片是一个有边框的盒子，其内容周围有一些填充物。它包括页眉、页脚、内容、颜色等选项。
John Doe
一些示例文本一些示例文本。 John Doe 是一名建筑师和工程师
See Profile基础卡片
我们可以通过 Bootstrap5 的 .card 与 .card-body 类来创建一个简单的卡片，卡片可以包含头部、内容、底部以及各种颜色设置，实例如下:
实例
<div class="card"><div class="card-body">Basic card</div>
</div>
亲自试一试 »
头部和底部
头部 内容 底部.card-header 类用于创建卡片的头部样式， .card-footer 类用于创建卡片的底部样式:
实例
<div class="card"><div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
亲自试一试 »
多种颜色卡片
要为卡片添加背景色，请使用上下文类 (.bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light.
实例
基本卡主要卡片
成功卡片
信息卡片
警示卡片
危险卡片
次要卡片
暗色卡片
浅色卡片 亲自试一试 »
Advertisement -->
标题、文本和链接
卡片标题
一些示例文本。 一些示例文本。
卡片链接 另一个链接我们可以在头部元素上使用 .card-title 类来设置卡片的标题 。
.card-text 类用于设置卡片正文的内容。
.card-link 类用于给链接设置颜色。
实例
<div class="card"><div class="card-body">
<h4 class="card-title">卡片标题</h4>
<p class="card-text">一些示例文本。 一些示例文本。</p>
<a href="#" class="card-link">卡片链接</a>
<a href="#" class="card-link">另一个链接</a>
</div>
</div>
亲自试一试 »
图片卡片
John Doe
一些示例文本一些示例文本。 John Doe 是一名建筑师和工程师
See ProfileJane Doe
一些示例文本一些示例文本。 Jane Doe 是一名建筑师和工程师
See Profile
将 .card-img-top 或 .card-img-bottom 添加到
<img> 中，将图像放置在卡的顶部或底部。请注意，我们已将图像添加到 .card-body 外部，以覆盖整个宽度:
实例
<div class="card" style="width:400px"><img class="card-img-top" src="img_avatar1.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">一些示例文本。</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
亲自试一试 »
卡片图像背景
John Doe
一些示例文本。一些示例文本。 一些示例文本。一些示例文本。 一些示例文本。一些示例文本。 一些示例文本。一些示例文本。
See Profile如果图像要设置为背景，可以使用 .card-img-overlay 类:
实例
<div class="card" style="width:500px"><img class="card-img-top" src="img_avatar1.png" alt="Card image">
<div class="card-img-overlay">
<h4 class="card-title">John Doe</h4>
<p class="card-text">一些示例文本。</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
亲自试一试 »
0 人点赞过
