利用Bootstrap card 制作母亲节小礼物

最新推荐文章于 2023-05-14 10:11:41 发布

HzZyYYY

最新推荐文章于 2023-05-14 10:11:41 发布

阅读量361

点赞数

本文链接：https://blog.csdn.net/qq_44820039/article/details/106042352

版权

这篇博客展示了程序员如何利用Bootstrap的卡片组件为母亲制作一份特别的母亲节礼物。通过介绍卡片组件的基本结构，包括卡片图片、内容和按钮，提供了一个简单的代码示例，展示如何创建具有不同布局的卡片。博主强调，尽管用图像处理软件也能达到效果，但亲手用代码制作的意义更为独特。

摘要由CSDN通过智能技术生成

谁说程序员不懂浪漫今天就利用Bootstrap中的卡片组件为母亲大人做一组名片。保证让母亲感动到哭。
在这里插入图片描述
你将会看到妈妈的这个样子（我儿子终于出息了），开不开心激不激动！

首先要知道什么是卡片：一张图片会配上一段文字说明，还记得学校的光荣榜吗上面放一张照片，下面就是姓名年级…介绍。
在这里插入图片描述
大概就是这个样子滴（哈哈哈哈这个图，形象得很）
这些外表咱不在乎，上代码
需要一个 .card，来拥有一张卡片，在卡片里面有
.card-img 卡片的图片，
.card-body 卡片的内容
在body里面加上卡片标题 .card-title 卡片文字.card-text 卡片按钮 btn按钮就和普通按钮没啥区别了

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img" alt="...">
  <div class="card-body">
    <h5 class="card-title"> ...</h5>
    <p class="card-text">  ....</p>
    <a href="#" class="btn btn-primary">...</a>