精选文章 《1+X证书 web前端》-bootstrap4知识点总结5

《1+X证书 web前端》-bootstrap4知识点总结5

作者：李 书 明 时间: 2019-11-07 10:48:47
李 书 明 2019-11-07 10:48:47
标签： 1+x证书web前端总结

卡片

简单的卡片

我们可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片，实例如下:


  
简单的卡片

带有头部和底部的卡片

.card-header类用于创建卡片的头部样式， .card-footer 类用于创建卡片的底部样式：


  
头部

  
内容
 
  
底部

图片卡片

我们可以给 《1+X证书 web前端》-bootstrap4知识点总结51 添加 .card-img-top（图片在文字上方） 或 .card-img-bottom（图片在文字下方 来设置图片卡片：

《1+X证书 web前端》-bootstrap4知识点总结52


  《1+X证书 web前端》-bootstrap4知识点总结53
  

    
John Doe

    
Some example text.

    See Profile

如果图片要设置为背景，可以使用 .card-img-overlay 类:

《1+X证书 web前端》-bootstrap4知识点总结54


  《1+X证书 web前端》-bootstrap4知识点总结55
  

    
John Doe

    
Some example text.

    See Profile

 

相关文章

勿删，copyright占位

【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至：huaweicloud.bbs@huawei.com 进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容。

为您推荐： 鼠标悬停 ECS去公网IP mysql5.6.26主从复制报错105 之七 android系统开发 linux shell sed awk puppet mongodb 4.0.12集群 mediaelement centos驱动
复制链接到剪贴板
分享文章到微博
分享文章到朋友圈

上一篇：fastjson对象，JSON，字符串，map之间的互相转换

下一篇：【算法实验四】（DP-动态规划）【花生米5】

您可能感兴趣

  • 软件测试面试1--软件测试基础理论（持续更新中...）

    1.软件测试工程师的素质： 良好的沟通和表达能力 具有怀疑与破坏的精神 扎实的软件测试基础知识 缜密的业务逻辑分析能力 处在用户的角度进行换位思考 足够的耐心、细心、信心、责任心 积极乐观向上的心态和团队协作能力 要有严谨、敢于承担责任、稳重的做事风格 善于自我总结、自我督促和不断学习的能 2.软件的分类： 软件 = 程序 + 数据 + 文档。 　　按照功能划分： 　　　　系统软件：如操作系...

  • 浅谈微服务体系中的分层设计和领域划分

    引言 看标题感觉这个东西很理论，比起“高并发、多线程”、“分布式CAP、一致性、Paxos”、“高可用SLA”等具体的干货技术点，软件体系知识显得很“湿”，似乎人人都有自己的认识，但又很少有人能说完整，有一点可以确定的是，如果你未来需要独立设计一个复杂的系统中台，并使之未来能快速应对各种需求变化的话，科学合理的领域划分和边界界定需要我们“处女座级”的坚持下去，这对防止人力失控、减少项目烂尾很...

  • MySQL访问权限管理

    参考文档： 官方文档：https://dev.mysql.com/doc/refman/5.7/en/security.html 这里有你想要的所有...

  • 全栈面试题总结-十四道大厂

    防抖，顾名思义，防止抖动，以免把一次事件误认为多次，敲键盘就是一个每天都会接触到的防抖操作。 想要了解一个概念，必先了解概念所应用的场景。在 JS 这个世界中，有哪些防抖的场景呢 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖 文本编辑器实时保存，当无任何更改操作一秒后进行保存...

  • 2020年iOS面试反思总结

    Object-C系列面试题总结 基础题： 1.Objective-C的类可以多重继承么？可以实现多个接口么？Category是什么？重写一个类的方式用继承好还是分类好？为什么不要在category中重写一个类原有的方法？ 答： Objective-c的类不可以有多继承，OC里面都是单继承，多继承可以用protocol委托代理来模拟实现 可以实现多个接口，可以通过实现多个接口完成OC的多重继承...

  • （4.1.21.9）HTTPS 加密过程演变分析

    1、前言 可能有初学者会问，即时通讯应用的通信安全，不就是对Socket长连接进行SSL/TLS加密这些知识吗，干吗要理解HTTPS协议呢。 这其实是个误解：当今主流的移动端IM数据通信，总结下来无外乎就是长连接+短连接的方式，长连接就是众所周之的TCP、UDP、WebSocket（WebSocket的本质还是TCP），而短连接就是HTTP/HTTPS了。即时通讯IM应用中，短连接的安全跟长...

  • 面试问题之——给你图片的url，你能知道它所占的字节空间吗？

    从一个需求说起 这标题起得有点标题党，实际情况是我最近在做一个公司内部工具时，遇到了这么一个需求，给定一个静态资源站点上某张图片的url（比如https://a.xxxcdn.com/demo.jpg），如何获取其存储大小并计算出加载该资源的平均网速呢？注意，是存储大小，而不是图片的宽高尺寸大小。接下来就是我在实现这个需求中总结的一些方式。 一、通过Ajax请求获取 这种方式涉及到XMLHt...

  • 3D人体姿态估计论文汇总（CVPR/ECCV/ACCV/AAAI）

    点击上方“3D视觉工坊”，选择“星标” 干货第一时间送达 作者：Vegetabird | 来源：知乎 https://zhuanlan.zhihu.com/p/137240831 本文仅做学术分享，如有侵权，请联系删除。 3D人体姿态估计是从图片或视频中估计出关节点的三维坐标 (x, y, z)，它本质上是一个回归问题。 它广泛地应用在动画、游戏、运动捕捉系统和行为理解中，也可以做为其他算法...

华为云40多款云服务产品0元试用活动

免费套餐，马上领取！
{"data":{"id":"8000-000000437045-0","name":"SEO专题页栏目分发组","type":"1","position":"8000-000000004003-0","status":1,"linkList":[{"id":"8000-000000669371-0","keyword":"能否提供一个mini设备h264的解码的例子","url":"https://bbs.huaweicloud.com/forum/thread-76256-1-1.html","secondDomain":null,"keyTitle":null,"weight":0,"tag":null,"pageTitle":null,"inputType":null,"updateByName":"pWX619094","updateByAccount":"pWX619094","updateAt":"2020-11-18 22:23:07","createByName":"pWX619094","createByAccount":"pWX619094","createAt":"2020-11-18 22:23:07","contentCheckCode":0},{"id":"8000-000000653798-0","keyword":"目标检测模型运行完成之后，结果图片无法从开发板传回宿主机查看","url":"https://bbs.huaweicloud.com/forum/thread-54325-1-1.html","secondDomain":null,"keyTitle":null,"weight":0,"tag":null,"pageTitle":null,"inputType":null,"updateByName":"pWX619094","updateByAccount":"pWX619094","updateAt":"2020-11-18 21:59:57","createByName":"pWX619094","createByAccount":"pWX619094","createAt":"2020-11-18 21:59:57","contentCheckCode":0},{"id":"8000-000000637186-0","keyword":"tensorflow 转换失败","url":"https://bbs.huaweicloud.com/forum/thread-22370-1-1.html","secondDomain":null,"keyTitle":null,"weight":0,"tag":null,"pageTitle":null,"inputType":null,"updateByName":"pWX619094","updateByAccount":"pWX619094","updateAt":"2020-11-18 21:35:12","createByName":"pWX619094","createByAccount":"pWX619094","createAt":"2020-11-18 21:35:12","contentCheckCode":0},{"id":"8000-000000618271-0","keyword":"脚本清单","url":"https://support.huaweicloud.com/tg-training-cann/atlasprofilingtrain_16_0081.html","secondDomain":null,"keyTitle":null,"weight":0,"tag":null,"pageTitle":null,"inputType":null,"updateByName":"pWX619094","updateByAccount":"pWX619094","updateAt":"2020-11-18 21:17:29","createByName":"pWX619094","createByAccount":"pWX619094","createAt":"2020-11-18 21:17:29","contentCheckCode":0},{"id":"8000-000000595731-0","keyword":"批量删除企业管理员","url":"https://support.huaweicloud.com/api-meeting/meeting_21_0083.html","secondDomain":null,"keyTitle":null,"weight":0,"tag":null,"pageTitle":null,"inputType":null,"updateByName":"pWX619094","updateByAccount":"pWX619094","updateAt":"2020-11-18 20:59:59","createByName":"pWX619094","createByAccount":"pWX619094","createAt":"2020-11-18 20:59:59","contentCheckCode":0},{"id":"8000-000000580133-0","keyword":"域名转入华为云","url":"https://support.huaweicloud.com/usermanual-domain/zh-cn_topic_0122928851.html","secondDomain":null,"keyTitle":null,"weight":0,"tag":null,"pageTitle":null,"inputType":null,"updateByName":"pWX619094","updateByAccount":"pWX619094","updateAt":"2020-11-18 20:52:43","createByName":"pWX619094","createByAccount":"pWX619094","createAt":"2020-11-18 20:52:43","contentCheckCode":0},{"id":"8000-000000547714-0","keyword":"Python 偏函数用法全方位解析","url":"https://bbs.huaweicloud.com/blogs/178778","secondDomain":null,"keyTitle":null,"weight":0,"tag":null,"pageTitle":null,"inputType":null,"updateByName":"pWX619094","updateByAccount":"pWX619094","updateAt":"2020-11-18 20:02:25","createByName":"pWX619094","createByAccount":"pWX619094","createAt":"2020-11-18 20:02:25","contentCheckCode":0},{"id":"8000-000000542296-0","keyword":"ftp命令详解","url":"https://bbs.huaweicloud.com/blogs/161530","secondDomain":null,"keyTitle":null,"weight":0,"tag":null,"pageTitle":null,"inputType":null,"updateByName":"pWX619094","updateByAccount":"pWX619094","updateAt":"2020-11-18 19:58:26","createByName":"pWX619094","createByAccount":"pWX619094","createAt":"2020-11-18 19:58:26","contentCheckCode":0},{"id":"8000-000000506550-0","keyword":"Trunk链路的配置、以太网通道的作用及实验（全程操作，可跟做！）","url":"https://bbs.huaweicloud.com/blogs/124969","secondDomain":null,"keyTitle":null,"weight":0,"tag":null,"pageTitle":null,"inputType":null,"updateByName":"pWX619094","updateByAccount":"pWX619094","updateAt":"2020-11-18 15:05:50","createByName":"pWX619094","createByAccount":"pWX619094","createAt":"2020-11-18 15:05:50","contentCheckCode":0},{"id":"8000-000000496916-0","keyword":"ThinkSNS+的 SPA（H5）安装教程","url":"https://bbs.huaweicloud.com/blogs/108736","secondDomain":null,"keyTitle":null,"weight":0,"tag":null,"pageTitle":null,"inputType":null,"updateByName":"pWX619094","updateByAccount":"pWX619094","updateAt":"2020-11-18 15:05:25","createByName":"pWX619094","createByAccount":"pWX619094","createAt":"2020-11-18 15:05:25","contentCheckCode":0}]},"total":null,"message":"success","status":true}

更多推荐

能否提供一个mini设备h264的解码的例子 目标检测模型运行完成之后，结果图片无法从开发板传回宿主机查看 tensorflow 转换失败 脚本清单 批量删除企业管理员 域名转入华为云 Python 偏函数用法全方位解析 ftp命令详解 Trunk链路的配置、以太网通道的作用及实验（全程操作，可跟做！） ThinkSNS+的 SPA（H5）安装教程

看了此文的人还看了

SSL证书管理 【WEB前端全栈成长计划】第一阶段•内容大集合 漏洞扫描服务 Web应用防火墙 证书简介 下载证书 【WEB前端全栈成长计划】第二阶段•内容大集合 Web应用防火墙 在Nginx服务器上安装SSL证书 CDN是否支持websocket协议？ WEB前端全栈极简入门指南 华为云微认证_在线学习_培训认证_鲲鹏学习_人工智能学习_华为云 如何获得微认证证书 如何配置云堡垒机Web证书？ 为什么在CDN中进行HTTPS配置时，提示证书链不齐全？ 应用侧接口差异说明 HTTPS双向认证 Classroom Apache Dubbo反序列化漏洞 华为云上有Websocket相关的服务吗？
写博客
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年，致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。
文中提到的产品 (

5

)
工具推荐： 云服务器 域名 建站 快速入门 大赛 资源工具 API 专题