bootstrap媒体对象是一类具有特殊版式的组件，用于设计图文混排的效果；bootstrap提供了两种类型的媒体对象，分别是媒体和媒体列表，媒体用于展示单个对象，媒体列表用于展示多个对象。

如何快速入门VUE3.0：进入学习

本教程操作环境：Windows10系统、bootstrap5版、DELL G3电脑

bootstrap实现的媒体对象是什么

媒体对象是一类具有特殊版式的组件，用来设计图文混排的效果，它们多是由一幅向左或向右浮动的图像和一些文本构成。

Bootstrap提供了两种类型的媒体对象：媒体（.media）和媒体列表（.media-list）。媒体用来展示单个对象，媒体列表用来展示多个对象。

媒体

默认情况下，媒体由一个向左或向右浮动的媒体对象（如，图像、视频、音频等）和媒体内容构成。一个媒体中，可以嵌套另一个媒体。

在HTML结构中，一个媒体由 3 部分组成：.media 创建媒体容器，.media-object 创建媒体对象，.media-body 创建媒体内容（其中，由 .media-heading 创建媒体的标题）。如：

div class="media">
    
  a class="pull-left" href="#">
    
    img class="media-object" data-src="holder.js/64x64">
    
  /a>
    
  div class="media-body">
    
    h4 class="media-heading">
    Media heading/h4>
    
    ...
    !-- Nested media object -->
    
    div class="media">
    
      ...
    /div>
    
  /div>
    
/div>
    

媒体对象一般是成组出现，一组媒体对象一般包括以下几部分：

1、媒体对象的容器：用来容纳媒体对象的所有内容，容器上需使用类名.media

2、媒体对象的对象：一般是图片，需使用类.media-object

3、媒体对象的主体：就是媒体对象的主体内容，可以是任何元素，需使用类.media-body

4、媒体对象的标题：用来描述媒体对象的一个标题，需使用类.media-heading

此外，bootstrap框架中常使用类.pull-left和.pull-right来控制媒体对象中的对象浮动方式