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

谁说程序员不懂浪漫今天 就利用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>
  </div>
</div>

介绍完之后来个完整的例子

<div class="container">
          <div class="row">
              <div class="col-lg-4">
                <div class="card " style="width: 20rem;">
                    <img class="card-img-top" src="./imgs/05.jpg" style="width: 20rem;" alt="">
                    <div class="card-body">
                        <h5 class="card-title">易烊千玺</h5>
                        <p class="card-text">能歌善舞，还会唱戏变脸</p>
                        <!-- <a href="#" class="btn btn-info">button card</a> -->
                    </div>
                 </div>
              </div>
       </div>

这里我就没有用妈妈的照片了（比较还修），就用其他照片代替了。

当然了 card 形式肯定不止这一种
还有这种 图片在下面，文字在上面

代码

<div class="card">
        <div class="card-body">
          <h5 class="card-title">易烊千玺</h5>
          <p class="card-text">能歌善舞，还会唱戏变脸</p>
          <p class="card-text"><small class="text-muted">还有腹肌哦</small></p>
        </div>
        <img src="./imgs/04.jpg" class="card-img-top" style="width:20rem;"  alt="...">
</div>

这样 列表显示

代码：

<div class="card" style="width: 18rem;">
        <img src="./imgs/02.jpg" class="card-img-top" alt="...">
        <ul class="list-group list-group-flush">
          <li class="list-group-item">20岁</li>
          <li class="list-group-item">喜欢榴莲</li>
          <li class="list-group-item">最近参加了 朋友请听好</li>
        </ul>
      </div>

这样 让图片中显示文字

代码：

<div class="card bg-dark text-whit">
        <img src="./imgs/02.jpg" style="width: 20rem;"class="card-img" alt="...">
        <div class="card-img-overlay">
          <h3 class="card-title text-white">易烊千玺</h3>
          <p class="card-text text-white">《南屏晚钟》小饭绘 穿红色卫衣的正能量少年</p>
          <p class="card-text text-white">和周冬雨荣获金像奖 出演电影《少年的你》</p>
        </div>
</div>

很多种形式，把这些结合起来做，就像平时在百度上搜图片时，那种布局，在加上文字，妈妈别提多开心

其实不难！用p图片软件一样可以出来，但是p图的和代码多不一样，一个是自己写的一个别人写的，对吧