bootstrap实现的媒体对象是什么

2022-08-22 16:50:25 IT技术网 互联网
浏览

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

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

bootstrap实现的媒体对象是什么

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

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

媒体

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

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

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

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

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

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

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

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

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

相关推荐：bootstrap教程

以上就是bootstrap实现的媒体对象是什么的详细内容，更多请关注dnjidi.com其它相关文章！

bootstrap