Bootstrap前端开发实例｜在卡片上添加文本和图像

清华计算机学堂 2022-12-09

529

Bootstrap是Twitter开发的一套Web前端框架，Bootstrap可以简单地理解为：对CSS的再次封装，因此在大多数情况下，对Bootstrap的应用就是对该框架的相关调用。

本系列所有Bootstrap代码基于Bootstrap 4.3.1实现，在IntelliJ IDEA 2019.2.3环境中编写完成，在最新版的“搜狗高速浏览器”和“Google Chrome浏览器”上测试成功，因此建议读者在上述环境或条件下使用源代码。所有源代码不需要下载Bootstrap的其他文件，在使用时保持网络畅通即可。此外，本系列实例推文需要读者有一定的HTML、CSS和JavaScript的基础知识。

下面这个实例演示了在卡片上添加文本和图像。

实例功能

此实例主要通过使用card、card-header、card-img、card-body、card-text、card-footer等类，创建Bootstrap4风格的卡片。当在浏览器中显示页面时，包含文本和图像的三张Bootstrap4风格的卡片如图1所示。

■ 图1

实现代码

在上面这段代码中，card类用于设置卡片整体样式。card-header类用于设置卡片顶部样式。card-body类用于设置卡片主体样式。card-footer类用于设置卡片底部样式。card-img类用于设置在卡片上添加的图像样式。card-text类用于设置在卡片上添加的文本样式。bg-success类表示卡片的背景颜色是绿色。其他几种背景颜色分别是：bg-primary类表示蓝色、bg-info类表示青色、bg-warning类表示黄色、bg-danger类表示红色、bg-secondary类表示灰色、bg-dark类表示黑色、bg-light类表示浅色。

此实例的源文件是MyCode＼ChapB＼ChapB073.html。

源代码下载

关注微信公众号，后台回复关键词 “Bootstrap代码075” 即可获得完整源代码。

* 在测试代码时，必须保持网络畅通。

参考图书

《Bootstrap+Vue.js前端开发超实用代码集锦》

ISBN：978-7-302-56815-5

罗帅罗斌编著

定价：99.8元