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 多媒体对象的基本结构,包括媒体内容和相关内容。在实际使用中,可以根据具体需求进行调整。最终一定要保证内容的合理性和易读性。