首页 Bootstrap5组件手册

基础类：
.card          卡片框
.card-header   头部框
.card-body     内容框
.card-footer   底部框
.card-link     链接
.card-img-overlay   图片设为背景

组合类：
.bg-*          背景颜色
.text-*        文字颜色

<div class="card">
  <div class="card-body">简单的卡片</div>
</div>





<div class="card">
  <div class="card-header">头部</div>
  <div class="card-body">内容</div>
  <div class="card-footer">底部</div>
</div>

<div class="card" style="width:200px">
  <img src="tu.png" width="100%">  <!--上方显示，放在 card-body 上方-->
  <div class="card-body">
    <h3>标题</h3>
    <p>文本内容。。。。。。</p>
    <a href="#" class="btn btn-primary">按钮</a>
  </div>
  <!--<img src="" width="100%">  下方显示，放在 card-body 下方-->
</div>


    

<div class="card" style="width:200px">
  <div class="card-body card-img-overlay">
    <h3>标题</h3>
    <p>文本内容。。。。。。。。。。。。。。。。。。。。。。</p>
    <a href="#" class="btn btn-primary">按钮</a>
  </div>
  <img src="tu.png" style="width:100%">
</div>