开发工具与关键技术:VS .Card
作者:微凉之夏
撰写日期:2019年06月16日
.Card卡片是个灵活的可扩展的内容窗口,同时可以做出很多种展示效果的变体,而.card卡片组件在BootStrap4中是新增的一组重要样式,它是一个个灵活的,可扩展的内容器,包含了可选的卡片头和卡片脚,一个大范围的内容,上下文背景色以及强大的显示选项,同时可用于按钮组合里可以把一系列按钮编排在一行里,并通过可选的JavaScript的插件的方法来赋予按钮单选或多选等强化行为。
.Card卡片就像我上一次所写的折叠面板中所用到的.card卡片样式,.card卡片用于多种不同的容器内容中,都是我们做练习或者做项目中所用到的重要样式,它同时也有不同的样式来实现大家所需要实现的效果,例如:内容类型、主体、标题、文字和链接、图片、列表组、混合样式、页眉和页脚和使用栅格系统等等。
下面是一个具有混合内容并固定了宽度的基本,.card卡片使用的示例,.card卡片如果没有定义宽度,将会自然的填满父元素的全部宽度而利用这个属性,我们就可以轻松的订制各种尺寸的卡片,一些快速的示例文本在卡片标题上构建,构成了卡片内容的大部分,代码如下:
先是用个大的
内容类型呢,卡片是支持多种多样的内容的,其中包括图片、文本、列祖、链接等等,混合并匹配多种内容类型以创建你所想要的卡片样式,主体:引用.card-body样式,可以建立起卡片的内容主体,如果你需要在一个.card中装置带边框的内容时,可以使用它,还有标题、文字和链接:通过.card-title和<h*>标签组合,可以添加卡片标题,同其将.card-link与标签结合使用,可以方便添加平行的链接,还有通过.card-subtitle和<h*>结合,可以添加副标题,如果.card-title和.card-subtitle组合放在.card-body中,则可对齐主、副标题,代码如下:
结果图如下: