.Card卡片

开发工具与关键技术：VS .Card
作者：微凉之夏
撰写日期：2019年06月16日

.Card卡片是个灵活的可扩展的内容窗口，同时可以做出很多种展示效果的变体，而.card卡片组件在BootStrap4中是新增的一组重要样式，它是一个个灵活的，可扩展的内容器，包含了可选的卡片头和卡片脚，一个大范围的内容，上下文背景色以及强大的显示选项，同时可用于按钮组合里可以把一系列按钮编排在一行里，并通过可选的JavaScript的插件的方法来赋予按钮单选或多选等强化行为。
.Card卡片就像我上一次所写的折叠面板中所用到的.card卡片样式，.card卡片用于多种不同的容器内容中，都是我们做练习或者做项目中所用到的重要样式，它同时也有不同的样式来实现大家所需要实现的效果，例如：内容类型、主体、标题、文字和链接、图片、列表组、混合样式、页眉和页脚和使用栅格系统等等。
下面是一个具有混合内容并固定了宽度的基本，.card卡片使用的示例，.card卡片如果没有定义宽度，将会自然的填满父元素的全部宽度而利用这个属性，我们就可以轻松的订制各种尺寸的卡片,一些快速的示例文本在卡片标题上构建,构成了卡片内容的大部分，代码如下：

先是用个大的

容器来包含着你所需要.card卡片的样式和内容，.card-img-top定义一张图片在卡片的顶部，.card-text定义文字在卡片中，当然你也可以在.card-text中设计自己的个性化HTML标签样式，.card-body是内容区里面可以添加.card-title为卡片的标题、.card-text为卡片的内容还可以在.card-body中放进一个按钮是的样式等多功能，下面是结果图：图中上方就是你所需要放的图片或者直接设置颜色，当然你也可不放图片或者颜色，它就会默认插件中的样式的了，其下就是卡片的标题和内容啦，最下面的就是用.btn来实现的按钮样式（其中你还可以按照它里面所有的按钮颜色来给它换颜色）。

内容类型呢，卡片是支持多种多样的内容的，其中包括图片、文本、列祖、链接等等，混合并匹配多种内容类型以创建你所想要的卡片样式，主体：引用.card-body样式，可以建立起卡片的内容主体，如果你需要在一个.card中装置带边框的内容时，可以使用它，还有标题、文字和链接：通过.card-title和<h*>标签组合，可以添加卡片标题，同其将.card-link与标签结合使用，可以方便添加平行的链接，还有通过.card-subtitle和<h*>结合，可以添加副标题，如果.card-title和.card-subtitle组合放在.card-body中，则可对齐主、副标题，代码如下：

结果图如下：