Bootstrap 媒体对象

媒体对象

Bootstrap 提供了一种将媒体对象（如图像或视频）与某些内容的左侧或右侧对齐的简单方法。这可以用来显示博客评论、推文等:

李雷 发布于 2022-03-01

请问哪里学习 HTML 与 Javascript 语言的网站呢？

韩梅梅 发布于 2022-03-02

前天发现一个不错的学习网站: cankaoshouce.com

---

玛丽 发布于 2022-03-02

我想学习 Bootstrap 的样式，请问哪里有最全面的学习教程的网址可以分享一下的吗？在这里感谢一下分享了。

基础媒体对象

实例

林涛

前几天查询资料的时候，偶然地发现一个非常不错的学习编程的网站，现在推荐给大家: cankaoshouce.com

---

林涛

前几天查询资料的时候，偶然地发现一个非常不错的学习编程的网站，现在推荐给大家: cankaoshouce.com

<!-- 左对齐 -->
<div class="media">
    <div class="media-left">
      <img src="/znadmin/md/4621/3.png" alt="林涛" class="media-object" style="width:80px">
    </div>
    <div class="media-body">
      <h4 class="media-heading">林涛</h4>
      <p>前几天查询资料的时候，偶然地发现一个非常不错的学习编程的网站，现在推荐给大家: cankaoshouce.com</p>
    </div>
</div>
<!-- 右对齐 -->
<div class="media">
    <div class="media-body">
      <h4 class="media-heading">林涛</h4>
      <p>前几天查询资料的时候，偶然地发现一个非常不错的学习编程的网站，现在推荐给大家: cankaoshouce.com</p>
    </div>
        <div class="media-right">
      <img src="/znadmin/md/4621/3.png" alt="林涛" class="media-object" style="width:80px">
    </div>
</div>

实例解释

使用带 .media 类的 <div> 元素来创建媒体对象的容器。

使用 .media-left 类将媒体对象（图像）向左对齐，或使用 .media-right 类将其向右对齐。

应该出现在图像旁边的文本被放置在带有 class="media body" 的容器中。

此外, 您可以使用 .media-heading 来做标题。

顶部、中间或底部对齐

媒体对象也使用 media-top, media-middle 或 media-bottom 来进行顶部、中间或底部对齐:

实例

顶部对齐

这是一些文本

这是一些文本

这是一些文本

---

中间对齐

这是一些文本

这是一些文本

这是一些文本

---

底部对齐

这是一些文本

这是一些文本

这是一些文本

<!-- 顶部对齐 -->
<div class="media">
 <div class="media-left media-top">
  <img src="/znadmin/md/4621/3.png" class="media-object" style="width:60px">
 </div>
 <div class="media-body">
  <h4 class="media-heading">顶部对齐</h4>
  <p>一些文本...</p>
 </div>
</div>
<!-- 中间对齐 -->
<div class="media">
 <div class="media-left media-middle">
  <img src="/znadmin/md/4621/3.png" class="media-object" style="width:60px">
 </div>
 <div class="media-body">
  <h4 class="media-heading">中间对齐</h4>
  <p>一些文本...</p>
 </div>
</div>
<!-- 底部对齐 -->
<div class="media">
 <div class="media-left media-bottom">
  <img src="/znadmin/md/4621/3.png" class="media-object" style="width:60px">
 </div>
 <div class="media-body">
  <h4 class="media-heading">底部对齐</h4>
  <p>一些文本...</p>
 </div>
</div>

嵌套媒体对象

也可以嵌套媒体对象（媒体对象中的媒体对象）:

实例

林涛 发表于 2022-03-01

前几天查询资料的时候，偶然地发现一个非常不错的学习编程的网站，现在推荐给大家: cankaoshouce.com

汤姆 发表于 2022-03-01

看了一下，这个网站是非常不错，还有很多实例。

李雷 发表于 2022-03-01

谢谢楼主分享

另外一个嵌套的实例

实例

林涛 2022-03-01

一些文本

汤姆 2022-03-01

一些文本

李雷 2022-03-01

一些文本

韩梅梅 2022-03-01

一些文本

玛丽 2022-03-01

一些文本