.Card卡片

news/2024/9/23 6:28:08/

开发工具与关键技术: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中,则可对齐主、副标题,代码如下:
在这里插入图片描述
结果图如下:
在这里插入图片描述


http://www.ppmy.cn/news/390156.html

相关文章

Web Components 系列(十一)—— 实现 MyCard 的可复用

前言 在上一节中&#xff0c;使用 Templates 实现了 MyCard 的基本布局&#xff0c;并且在文章结尾我也说过&#xff0c;因为不可复用&#xff0c;其实用性基本为零。 今天我们通过使用具名 Slots 在 Templates 中占位&#xff0c;然后再在自定义元素中给 Slots 传值&#xf…

Credit Card

题意&#xff1a;现在有一张银行卡&#xff0c;每天傍晚都会进行一些交易&#xff0c;如果交易金额大于0&#xff0c;则账户余额增加相应的金额&#xff0c;如果交易金额小于0&#xff0c;则账户扣除相应的金额&#xff0c;如果等于0&#xff0c;则对账户金额进行检查&#xff…

卡片....

小蓝有 &#xfffd;k 种卡片, 一个班有 &#xfffd;n 位同学, 小蓝给每位同学发了两张卡片, 一 位同学的两张卡片可能是同一种, 也可能是不同种, 两张卡片没有顺序。没有 两位同学的卡片都是一样的。 给定 &#xfffd;n, 请问小蓝的卡片至少有多少种? import java.util.Sca…

MyCart

//*********************************fragment************************************************************************************************** //购物车接口的实现 //*************************************************************** cartAdapter.setOnCartListene…

[MyCat]MyCat下载及安装

1MyCat下载及安装 1.1 MySQL安装与启动 JDK&#xff1a;要求jdk必须是1.7及以上版本 MySQL&#xff1a;推荐mysql是5.5以上版本 MySQL安装与启动步骤如下&#xff1a;( 步骤1-5省略 ) &#xff08;1&#xff09;将MySQL的服务端和客户端安装包&#xff08;RPM&#xff09;上传到…

MyPsnCard 我的奖杯卡 V1.0 发布

应用简介 本应用是一个android widget程序&#xff0c;用于在android系统中&#xff0c;根据用户输入的PSNID等信息&#xff0c; 动态生成用户的Portable ID信息&#xff0c;也就是常说的奖杯卡信息。 应用特性 无需登陆PSN&#xff0c;获取任何指定PSNID的奖杯信息 支持自定…

卡片 .....

小蓝有很多数字卡片&#xff0c;每张卡片上都是数字 00 到 99。 小蓝准备用这些卡片来拼一些数&#xff0c;他想从 11 开始拼出正整数&#xff0c;每拼一个&#xff0c;就保存起来&#xff0c;卡片就不能用来拼其它数了。 小蓝想知道自己能从 11 拼到多少。 例如&#xff0c;当…