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

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

作者:李 书 明 时间: 2021-02-05 09:54:08
李 书 明 2021-02-05 09:54:08
【摘要】卡片 
简单的卡片 
我们可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片,实例如下: 

  简单的卡片
 
带有头部和底部的卡片 
.card-header类用于创建卡片的头部样式, .card-footer 类用于创建卡片的底部样式: 

  头部
  内容 底部
 
图片卡片 
我们可以给  添加 .card-img-top(图片在文字...

卡片

简单的卡片

我们可以通过 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

 

分享文章到微博
分享文章到朋友圈

上一篇:【算法实验四】(DP-动态规划)【花生米5】

下一篇:fastjson对象,JSON,字符串,map之间的互相转换

CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。
《1+X证书 web前端》-bootstrap4知识点总结5介绍:华为云为您免费提供《1+X证书 web前端》-bootstrap4知识点总结5在博客、论坛、帮助中心等栏目的相关文章,同时还可以通过 站内搜索 查询更多《1+X证书 web前端》-bootstrap4知识点总结5的相关内容。| 移动地址: 《1+X证书 web前端》-bootstrap4知识点总结5 | 写博客