Bootstrap前端开发实例｜在卡片上添加文本和图像 Bootstrap是Twitter开发的一套Web前

文章图片
Bootstrap是Twitter开发的一套Web前端框架， Bootstrap可以简单地理解为：对CSS的再次封装，因此在大多数情况下，对Bootstrap的应用就是对该框架的相关调用。
本系列所有Bootstrap代码基于Bootstrap4.3.1实现，在IntelliJIDEA2019.2.3环境中编写完成，在最新版的“搜狗高速浏览器”和“GoogleChrome浏览器”上测试成功，因此建议读者在上述环境或条件下使用源代码。所有源代码不需要下载Bootstrap的其他文件，在使用时保持网络畅通即可。此外，本系列实例推文需要读者有一定的HTML、CSS和Java的基础知识。
下面这个实例演示了在卡片上添加文本和图像。
01
实例功能
此实例主要通过使用card、card-header、card-img、card-body、card-text、card-footer等类，创建Bootstrap4风格的卡片。当在浏览器中显示页面时，包含文本和图像的三张Bootstrap4风格的卡片如图1所示。

文章图片
■图1
02
实现代码

文章图片

文章图片
在上面这段代码中， 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 。
03
源代码下载
关注微信公众号，后台回复关键词“Bootstrap代码075”即可获得完整源代码。
*在测试代码时，必须保持网络畅通。
04
参考图书
《Bootstrap+Vue.js前端开发超实用代码集锦》
ISBN：978-7-302-56815-5
罗帅罗斌编著
定价：99.8元
扫码优惠购书返回搜狐，查看更多
【Bootstrap前端开发实例｜在卡片上添加文本和图像】责任编辑：