bootstrap实现的媒体对象叫什么

本篇内容主要讲解“bootstrap实现的媒体对象叫什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“bootstrap实现的媒体对象叫什么”吧!

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

本教程操作环境：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">
    <h5 class="media-heading">Media heading</h5>
    ...
    <!-- 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来控制媒体对象中的对象浮动方式

到此，相信大家对“bootstrap实现的媒体对象叫什么”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！