<!--这里要配合 .nav 暂时也没讲 跟着做即可：-->
<div class="card" style="width: 500px;"><div class="card-header"><ul class="card-header-tabs nav nav-tabs"><li class="nav-item" > <a class="nav-link active" href="#">    Home </a></li><li class="nav-item" > <a class="nav-link" href="#"> Content </a></li><li class="nav-item" > <a class="nav-link disabled" href="#"> About   </a></li></ul></div><div class="card-body">内容</div>
</div><!--讲解：
card-header-tabs：做一个头部水平列表的导航【去除头部本有的分隔线】
nav：导航基类    nav-tabs：导航样式【加正方形外框】
nav-item： 导航项目  nav-link：导航链接【不加没效果】
active：nav导航选中状态    disabled：nav导航禁止状态所以你可以自己去去掉 然后看看样式即可
-->

<!--另一种样式： 在上面的基础上改两个地方：
1.card-header-tabs      ->  card-header-pills
2.nav-tabs              ->  nav-pills
-->
<div class="card" style="width: 500px;"><div class="card-header"><ul class="nav card-header-pills  nav-pills"><li class="nav-item" > <a class="nav-link active" href="#">    Home </a></li><li class="nav-item" > <a class="nav-link" href="#"> Content </a></li><li class="nav-item" > <a class="nav-link disabled" href="#"> About   </a></li></ul></div><div class="card-body">内容</div>
</div>

<!--最简单的 图片做背景 然后写文字-->
<div class="card w-25 text-center text-white"><img src="1.jpg" class="card-img card-img-overlay" alt=""><div class="card-img-overlay">To:<br>开学健康 | 学习进步</div>
</div>

<div class="card text-info bg-info"><div class="row"><div class="col-6"><img class="card-img" src="1.jpg" ></div><div class="col-6 text-warning"><h2 class="card-title">文 本 标 题</h2><p class=" card-text">Luckily, unless you really do intend for the evaluated code to have access to local variables (in which case you're probably doing something wrong!), you can achieve the same effect in one of two ways:</p></div></div>
</div>

<div class="card text-info bg-info"><div class="row"><div class="col-6"><img class="card-img" src="1.jpg" ></div><div class="col-6 text-warning"><h2 class="card-title">文 本 标 题</h2><p class=" card-text">Luckily, unless you really do intend for the evaluated code to have access to local variables (in which case you're probably doing something wrong!), you can achieve the same effect in one of two ways:</p></div></div>
</div><!--下面开始 卡片组合：-->
<div class="card-group">
<!---------------------------------------------------------------->
<div class="card w-25 text-center"><div class="card-body"><img src="1.jpg" class="card-img"></div><div class="card-footer">&copy;BiHu集团版权所有</div>
</div>
<!----------------------------------------------------------------><div class="card w-25 text-center"><div class="card-body"><img src="1.jpg" class="card-img"></div><div class="card-footer">&copy;BiHu集团版权所有</div>
</div>
<!----------------------------------------------------------------><div class="card w-25 text-center"><div class="card-body"><img src="1.jpg" class="card-img"></div><div class="card-footer">&copy;BiHu集团版权所有</div>
</div>
</div>