11. 爬虫训练场，学校数据分页呈现，Bootstrap5 媒体组件

Posted 2023-01-24 梦想橡皮擦

上一篇博客，我们实现了分页逻辑的前后端打通，但是数据渲染还未完成，本篇博客继续补充这部分知识点。
《爬虫训练场》仓库地址：https://gitcode.net/hihell/spider_playground

爬虫训练场

• • 媒体对象默认样式
  • 数据渲染
  • 首页再修改

本篇博客的目标是实现一种图片巨作，内容具有排列的效果，在 Bootstrap 5 中被称作媒体对象，首先看一下默认样式。

媒体对象默认样式

正式编写代码前，先看一下媒体对象基本组成。

1. 媒体对象的容易，用来容纳媒体对象所有内容，需要添加 .media 类；
2. 媒体对象的元素，一般包含图片，需要添加类 .media-object；
3. 媒体对象的主体内容，可以为任意元素，需要使用类 .media-body；
4. 媒体对象的标题，需要使用类 .media-heading。

但是上述知识点都是在 Bootstrap 4 中的实践，Bootstrap 5 已经删除了该部分组件，但是你可以使用更加灵活的形式进行布局。