Bootstrap 4 媒体对象

Bootstrap 4 中的媒体对象可让你在你的网页上呈现出多个媒体资源，包括图像、视频、音频、文本等等。它是一种非常有用的工具，可让你轻松地构建页面设计，使其看起来更加美观和易于导航。

媒体对象的用途

媒体对象是用来展示多个媒体资源的，最常见的场景是新闻列表、评论区等等。媒体对象可以包含图像、文字和链接，可以根据您的需要进行定制。

如何创建一个媒体对象？

在 Bootstrap 4 中创建一个媒体对象非常简单。只需按照以下步骤：

<div class="media">
    <img src="your-image-url" alt="" class="mr-3">
    <div class="media-body">
        <h5 class="mt-0">Media heading</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate enim et sodales hendrerit.</p>
    </div>
</div>

• 元素使用 .media 类封装；
• 媒体资源（图片、视频等等）使用 <img> 元素实现，并使用 .mr-3 类使其向左对齐；
• 媒体对象的主要内容使用 <div> 元素实现，并使用 .media-body 类封装。

媒体对象的样式定制化

在默认的媒体对象样式基础上，可以进一步进行定制化。

媒体对象的导航

可以在媒体对象中添加链接，使其成为可点击的导航。

<div class="media">
    <img src="your-image-url" alt="" class="mr-3">
    <div class="media-body">
        <h5 class="mt-0">Media heading</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate enim et sodales hendrerit.</p>
        <a href="#">Read more →</a>
    </div>
</div>

媒体对象的对齐方式

可以将媒体对象向右或向左对齐。

<div class="media">
    <img src="your-image-url" alt="" class="mr-3 align-self-start">
    <div class="media-body">
        <h5 class="mt-0">Media heading</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate enim et sodales hendrerit.</p>
    </div>
</div>

• 如果想将媒体对象向左对齐，可以添加 .align-self-start 类；
• 如果想将媒体对象向右对齐，可以添加 .align-self-end 类。

反转媒体对象

可以使用 .flex-row-reverse 类反转媒体对象的方向。

<div class="media flex-row-reverse">
    <img src="your-image-url" alt="" class="ml-3">
    <div class="media-body">
        <h5 class="mt-0">Media heading</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate enim et sodales hendrerit.</p>
    </div>
</div>

总结

通过 Bootstrap 4 的媒体对象，我们可以轻松地构建出美观易用的页面设计，呈现出多个媒体资源，并支持进一步的样式定制化。体验一下吧！