Card，卡片组件。一些图文列表我们可以使用 Bootstrap 的 Card 组件来显示 ..

一个卡片组件需要一个包装 .. 上面加上 card .. 它里面包装的卡片里的不同的部分 .. 比如可以有个 card-header .. 里面添加一个标题元素 .. card ..

卡片的主体内容放在一个带 card-body 类的容器里面 .. 主体里的标题，可以使用一个标题元素 .. 然后加上一个 card-title .. 要显示的文字是 title ..

卡片里的文字的包装上面，加上一个 card-text .. description ..

动作链接 ，可以用一个 a 标签 .. 上面加上一个 card-link .. action .. 再复制一份 .. 这两个链接之间会有一个间隔 ..

卡片还可以有个 footer， 一个包装，上面要加上 card-footer ..

对齐

在卡片组件的包装上面可以设置文字的对齐方式 .. 比如让文字右对齐，可以添加一个 text-right ... 让它们居中，可以使用一个 text-center ..

简单的卡片

这里我们先准备一个简单的卡片，只留下主体部分 .. 去掉它的 header .. 还有 footer

图片

卡片的顶部或者底部可以添加一张图片 .. 一个 img 标签 .. 我提前在项目的 img 目录的下面放了几张图片 .. 在 img 标签的 src 属性里面可以设置一下图像的地址 ./img/1.jpg

这个图像元素的上面要再添加一个 card-img-top .. 因为这张图片是在卡片顶部显示的 .. 这样会在图片的上边这两个拐角的地方应用一个圆角效果 .. 在卡片底部显示的图片可以添加一个 card-img-bottom 这个类。它会在图片的底边的左右两个角上面应用一个圆角效果 ..

Overlay
卡片里的文字可以覆盖在卡片图像的上面显示 .. 可以把这个 card-body 换成 card-img-overlay ..

图像元素的上面的类，可以换成 card-img .. 这样图像的四个角都会应用一个圆角效果 ..

在卡片的包装上面，再添加一个 text-white，可以把图片里面的文字变成白色 ..