.Card卡片

news/2024/2/28 17:54:54

开发工具与关键技术: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;当…

android+sim卡软件,超级SIM卡APP

超级SIM卡APP是你的私人数据保存中心&#xff0c;你可以将手机中的数据存储到里面&#xff0c;换机后可一键恢复所有数据。兼容主流安卓手机的数据格式&#xff0c;备份时数据以密文存储&#xff0c;保证数据安全。 【功能说明】 1、笔记功能——您的私人笔记本&#xff0c;可记…

Dao层、Service层、Entity层、Servlet层、Utils层

这几天在复习高数&#xff0c;还有刷题。 B&#xff1a; 第五周任务 [Cloned] - Virtual Judge (vjudge.net) http://t.csdn.cn/S3imr G&#xff1a; 第五周任务 [Cloned] - Virtual Judge (vjudge.net) http://t.csdn.cn/UVgfK Dao层是数据访问层Service层是业务逻辑层…

Cards

Java 训练营 数组 长度与遍历数据元素 使用.length 属性获取当前数组的长度, 长度就是数组中元素的个数. package day05; ​ public class Demo01 {public static void main(String[] args) {/** 数组的长度*/String[] names {"Tom", "Andy", "J…

Android MyCard支付

MyCard支付&#xff1a; 1、通过商务联系MyCard进行技术对接&#xff0c;获得最新MyCardPaySDK.jar和接入文档 2、导入MyCardPaySDK.jar 3、根据MyCard提供文档设置AndroidManifest.xml 4、根据自身需求确定是走SDK支付方式还是WebView支付方式 4-1、SDK支付方式 MyCa…

【实战与杂谈】如何复活一个开源网站-游戏王卡片生成器

1. 杂谈 作为一名十多年游戏王玩家&#xff0c;学生时代玩的是PSP和PS2上的游戏&#xff0c;到毕业后使用YGOPRO同步新卡片进行联网对战&#xff0c;再到现在约到线下进行实体卡片游戏。有些卡片价格太贵&#xff0c;因此我们对于这些卡在未购买之前都会自己打印出来暂时游玩…

【RabbitMQ教程】第四章 —— RabbitMQ - 交换机

&#x1f4a7; 【 R a b b i t M Q 教程】第四章—— R a b b i t M Q − 交换机 \color{#FF1493}{【RabbitMQ教程】第四章 —— RabbitMQ - 交换机} 【RabbitMQ教程】第四章——RabbitMQ−交换机&#x1f4a7; &#x1f337; 仰望天空&#xff0c;妳我亦是行人.✨ &…

叶舞大神

hello world &#xff01; 以后我会常来 总目录

为什么会显示未找到服务器,为什么我点开始游戏他显示未找到服务器列表呢 – 手机爱问...

2009-03-08 为什么打开一些网页总是出现找不到 首先将一切带监控的软件的监控全部暂是关闭&#xff0c;将防火墙关闭&#xff0c;如果故障排除&#xff0c;说明与他们有关系&#xff0c;然后你在慢慢找出问题所在&#xff0c;加以解决。如果故障依旧&#xff0c;按下面方法修复…

C# 基础函数内容

public static void BlockCopy(Array src, int srcOffset, Array dst, int dstOffset, int count); Buffer.BlockCopy 参数 src 初始的数组srcoffset 初始数组的偏移量 从0开始&#xff0c;0代表数组[0]dst 接受的数组dstoffset 接受数组的偏移量 从0开始&#xff0c;表示从数…

作为一名SAP从业人员,需要专门学习数学么

最近和SAP成都研究院的开发同事聊到过这个话题&#xff0c;Jerry来说说自己的看法。 先回忆回忆自己本科和研究生学过的数学课程。Jerry的大一生活是在电子科技大学的九里堤校区度过的&#xff0c;本科第一门数学课就是微积分。 因为微积分是计算机专业的学生参加研究生入学考试…

pycharm + django 解决跨域无提示

如何解决pycharm配置跨域不提示? 正常我们需在在如上中间件内配置跨域,但是2019之前的版本配置中间件可能需要全部自己敲出来,不会有提示,那我们不妨换个位置试试 在TEMPLATES模板的最后一行(如上图位置所示)编写跨域的中间件会出现完整提示,如若提示不准确,可多打几个…

【转】关于编辑器 by songxiaoyu8

原文链接&#xff1a;http://blog.sina.com.cn/s/blog_564cdc590100l41f.html 关于编辑器 1总述 我们知道&#xff0c;开发游戏时的编辑器非常重要。不少游戏开发人员对编辑器有一个误区&#xff0c;那就是编辑器只是美术人员在搭建场景时才会用的东西。 好&#xff0c;先来说说…
最新文章