Bootstrap4 多媒体对象
Bootstrap4 多媒体对象是一种可在网页上展示视频、图片等多媒体内容的组件。多媒体对象由媒体内容和相关内容（标题、描述等）组成。
媒体对象的基本结构
媒体对象的基本结构由一个媒体容器和相关内容容器组成。媒体容器包括了一个媒体内容，而相关内容容器包括相关的标题、描述和其它可选内容。
<div class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p>Some text here...</p>
</div>
</div>
在上面的代码中，.media是媒体容器的基本类，.media-body是相关内容容器的基本类。.mr-3是一个 margin-right 的 utility 类，用来设置图片位置。
媒体内容
Bootstrap4 多媒体对象的媒体内容可以是图片、音频、视频等。媒体内容只需要放在.media容器内即可。
图片
使用<img>标签可以插入图片。例如：
<div class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p>Some text here...</p>
</div>
</div>
src属性：图片的 URL 或本地路径。alt属性：图片的替换文本，特别是在无法加载图片时。
音频或视频
使用<audio>和<video>标签可以插入音频或视频。例如：
<div class="media">
<video class="mr-3" controls>
<source src="..." type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p>Some text here...</p>
</div>
</div>
在上面的代码中，controls属性将为视频添加一个控件条。
相关内容
多媒体对象除了媒体内容，还包括了相关内容，包括标题、描述等。
标题
标题通常出现在相关内容容器的最顶端。使用<h5>标签作为标题标签。
<div class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p>Some text here...</p>
</div>
</div>
在上面的代码中，.mt-0是一个 margin-top 为 0 的 utility 类，用来清除默认的 margin。
描述
描写内容可以在标题下方添加。使用<p>标签添加描述文本，例如：
<div class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p>Some text here...</p>
<p>More text here...</p>
</div>
</div>
其它相关内容
其它相关内容可以使用列表（<ul>或<ol>标签）或表格（<table>标签）等。例如：
<div class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<p>Text here...</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
</div>
总结
上面讲了 Bootstrap4 多媒体对象的基本结构，包括媒体内容和相关内容。在实际使用中，可以根据具体需求进行调整。最终一定要保证内容的合理性和易读性。