bootstrap實(shí)現(xiàn)的媒體對(duì)象叫什么

本篇內(nèi)容主要講解“bootstrap實(shí)現(xiàn)的媒體對(duì)象叫什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“bootstrap實(shí)現(xiàn)的媒體對(duì)象叫什么”吧!

bootstrap媒體對(duì)象是一類具有特殊版式的組件，用于設(shè)計(jì)圖文混排的效果；bootstrap提供了兩種類型的媒體對(duì)象，分別是媒體和媒體列表，媒體用于展示單個(gè)對(duì)象，媒體列表用于展示多個(gè)對(duì)象。

本教程操作環(huán)境：Windows10系統(tǒng)、bootstrap5版、DELL G3電腦

bootstrap實(shí)現(xiàn)的媒體對(duì)象是什么

媒體對(duì)象是一類具有特殊版式的組件，用來設(shè)計(jì)圖文混排的效果，它們多是由一幅向左或向右浮動(dòng)的圖像和一些文本構(gòu)成。

Bootstrap提供了兩種類型的媒體對(duì)象：媒體（.media）和媒體列表（.media-list）。媒體用來展示單個(gè)對(duì)象，媒體列表用來展示多個(gè)對(duì)象。

媒體

默認(rèn)情況下，媒體由一個(gè)向左或向右浮動(dòng)的媒體對(duì)象（如，圖像、視頻、音頻等）和媒體內(nèi)容構(gòu)成。一個(gè)媒體中，可以嵌套另一個(gè)媒體。

在HTML結(jié)構(gòu)中，一個(gè)媒體由 3 部分組成：.media 創(chuàng)建媒體容器，.media-object 創(chuàng)建媒體對(duì)象，.media-body 創(chuàng)建媒體內(nèi)容（其中，由 .media-heading 創(chuàng)建媒體的標(biāo)題）。如：

<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>

媒體對(duì)象一般是成組出現(xiàn)，一組媒體對(duì)象一般包括以下幾部分：

1、媒體對(duì)象的容器：用來容納媒體對(duì)象的所有內(nèi)容，容器上需使用類名.media

2、媒體對(duì)象的對(duì)象：一般是圖片，需使用類.media-object

3、媒體對(duì)象的主體：就是媒體對(duì)象的主體內(nèi)容，可以是任何元素，需使用類.media-body

4、媒體對(duì)象的標(biāo)題：用來描述媒體對(duì)象的一個(gè)標(biāo)題，需使用類.media-heading

此外，bootstrap框架中常使用類.pull-left和.pull-right來控制媒體對(duì)象中的對(duì)象浮動(dòng)方式

到此，相信大家對(duì)“bootstrap實(shí)現(xiàn)的媒體對(duì)象叫什么”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！