Bootstrap4 多媒体对象学习笔记

Bootstrap4 多媒体对象是一种灵活的组件，可用于在列表视图中显示图像、视频或音频。它可以很容易地使多媒体内容具有响应式特性。

创建多媒体对象

要创建一个多媒体对象，我们需要使用 media 类和 media-body 类来定义每个对象的主题部分。

以下是一个简单的多媒体对象示例：

markdownCopy Code
<div class="media">
  <img src="image.jpg" class="align-self-start mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent iaculis lacus nec enim tincidunt, id efficitur felis congue. Aenean eget mi vel enim lacinia pellentesque. Phasellus finibus sed tellus sit amet faucibus. </p>
  </div>
</div>

这个多媒体对象包含一个图像和一个标题与正文。

图像使用 align-self-start 类将其定位在内容区域的左侧，而 mr-3 类则为图像添加了右侧的间距。

响应式多媒体对象

Bootstrap4 的多媒体对象可以很好地适应不同的屏幕尺寸。使用以下类可以轻松实现：

• d-flex：定义弹性容器
• flex-column：将弹性容器变成垂直方向的列
• align-items-stretch：将每个多媒体对象的高度设置为相同

markdownCopy Code
<div class="d-flex flex-column">
  <div class="media">
    <img src="image1.jpg" class="align-self-start mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0">Media heading 1</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent iaculis lacus nec enim tincidunt, id efficitur felis congue. Aenean eget mi vel enim lacinia pellentesque. Phasellus finibus sed tellus sit amet faucibus. </p>
    </div>
  </div>

  <div class="media">
    <img src="image2.jpg" class="align-self-start mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0">Media heading 2</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent iaculis lacus nec enim tincidunt, id efficitur felis congue. Aenean eget mi vel enim lacinia pellentesque. Phasellus finibus sed tellus sit amet faucibus. </p>
    </div>
  </div>
</div>

这个示例包含两个多媒体对象，并进行了响应式设计，使其适应不同的屏幕尺寸。

总结

Bootstrap4 多媒体对象是一种非常实用的组件，可以轻松创建具有响应式特性的多媒体内容。使用上述类可以使多媒体对象适应不同的屏幕尺寸，为用户提供更好的体验。