Bootstrap 3 之 Bootstrap 多媒体对象

Bootstrap 提供了一种简单而有效的方式来呈现多媒体内容，如图片、视频和音频。通过使用 Bootstrap 的多媒体对象类，您可以轻松地将多媒体内容嵌入到您的网页中，并使其具有响应式设计。

图片

要在您的网页中添加图片，您可以使用 Bootstrap 的 .img-responsive 类来确保图片在不同设备上都能正确显示。这个类会使图片自动适应父元素的大小，并保持比例。

示例代码：

<img src="image.jpg" class="img-responsive" alt="Responsive image">

嵌入视频

您可以使用 Bootstrap 的 .embed-responsive 类来嵌入响应式视频。Bootstrap 提供了几种不同的宽高比选项，如 16:9、4:3 等。

示例代码：

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/VIDEO_ID"></iframe>
</div>

嵌入音频

要嵌入音频文件，您可以使用 Bootstrap 的 .embed-responsive 类，并添加 .embed-responsive-item 类来确保音频播放器响应式显示。

示例代码：

<div class="embed-responsive embed-responsive-4by3">
  <audio controls class="embed-responsive-item">
    <source src="audio.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>
</div>

通过使用 Bootstrap 的多媒体对象类，您可以轻松地在您的网页中添加图片、视频和音频，并使它们具有响应式设计，以适应不同设备的屏幕大小。这样可以提升用户体验，让您的网页内容更加吸引人。