上一节:
下一节:

  Bootstrap 媒体对象

  • 定义和使用

    Bootstrap 提供了一种将媒体对象（例如图像或视频）与内容对齐的简便方法；媒体对象通常用于显示博客评论，推文等。
    要创建媒体对象，请将 .media 类添加到容器元素，然后使用 .media-body 类将媒体内容放入子容器中；使用间距实用程序根据需要添加填充和边距： 
    <div class="media border p-3">
  <img src="/images/bootstrap/img_avatar3.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
  <div class="media-body">
    <h4>菜鸟教程<small><i>发表于 2020.01.03</i></small></h4>
    <p>Bootstrap一个前端最受欢迎的框架，编程始于足下...</p>
  </div>
</div>
    尝试一下
    预览以下输出结果：
    John Doe

    菜鸟教程 发表于 2020.01.03

    Bootstrap一个前端最受欢迎的框架，编程始于足下Bootstrap一个前端最受欢迎的框架，编程始于足下Bootstrap一个前端最受欢迎的框架，编程始于足下Bootstrap一个前端最受欢迎的框架，编程始于足下Bootstrap一个前端最受欢迎的框架，编程始于足下

  • 嵌套媒体对象

    媒体对象也可以嵌套（媒体对象内部的媒体对象）。
    要嵌套媒体对象，请在 .media-body 容器内放置一个新的 .media 容器： 
    <div class="media border p-3">
  <img src="/images/bootstrap/img_avatar3.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
  <div class="media-body">
    <h4>张三<small><i>发表于 2020.01.03</i></small></h4>
    <p>热爱前端...</p>
    <div class="media p-3">
      <img src="/images/bootstrap/img_avatar1.png" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
      <div class="media-body">
        <h4>李四<small><i>发表于 2020.01.04</i></small></h4>
        <p>热爱后端...</p>
      </div>
    </div> 
  </div>
</div>
    尝试一下
    预览以下输出结果：
    John Doe

    张三 发表于 2020.01.03

    热爱前端热爱前端热爱前端热爱前端热爱前端热爱前端热爱前端热爱前端热爱前端热爱前端热爱前端热爱前端热爱前端热爱前端热爱前端热爱前端热爱前端热爱前端热爱前端热爱前端热爱前端热爱前端...
    Jane Doe

    李四 发表于 2020.01.04

    热爱后端热爱后端热爱后端热爱后端热爱后端热爱后端热爱后端热爱后端热爱后端热爱后端热爱后端热爱后端热爱后端热爱后端热爱后端热爱后端热爱后端热爱后端热爱后端热爱后端热爱后端...

  • 右对齐媒体图像

    要右对齐媒体图像，请将图像添加到 .media-body 容器之后： 
    <div class="media border p-3">
  <div class="media-body">
    <h4>菜鸟教程<small><i>发表于 2020.01.03</i></small></h4>
    <p>Bootstrap一个前端最受欢迎的框架，编程始于足下...</p>
  </div>
  <img src="/images/bootstrap/img_avatar3.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
</div>
    尝试一下
    预览以下输出结果：

    菜鸟教程 发表于 2020.01.03

    Bootstrap一个前端最受欢迎的框架，编程始于足下Bootstrap一个前端最受欢迎的框架，编程始于足下Bootstrap一个前端最受欢迎的框架，编程始于足下Bootstrap一个前端最受欢迎的框架，编程始于足下Bootstrap一个前端最受欢迎的框架，编程始于足下
    John Doe

  • 顶部，中间或底部对齐

    使用 flex 实用程序 align-self- * 类将媒体对象放在顶部，中间或底部： 
    //顶部
<div class="media">
  <img src="/images/bootstrap/img_avatar1.png" class="align-self-start mr-3" style="width:60px">
  <div class="media-body">
    <h4>媒体顶部</h4>
    <p>媒体顶部媒体顶部媒体顶部...</p>
  </div>
</div>

//中间
<div class="media">
  <img src="/images/bootstrap/img_avatar1.png" class="align-self-center mr-3" style="width:60px">
  <div class="media-body">
    <h4>媒体中间</h4>
    <p>媒体中间媒体中间媒体中间...</p>
  </div>
</div>

//底部
<div class="media">
  <img src="/images/bootstrap/img_avatar1.png" class="align-self-end mr-3" style="width:60px">
  <div class="media-body">
    <h4>媒体底部</h4>
    <p>媒体底部媒体底部媒体底部...</p>
  </div>
</div>
    尝试一下
    预览以下输出结果：

    媒体顶部

    媒体顶部媒体顶部媒体顶部媒体顶部媒体顶部媒体顶部媒体顶部媒体顶部媒体顶部媒体顶部媒体顶部媒体顶部媒体顶部媒体顶部媒体顶部媒体顶部媒体顶部媒体顶部媒体顶部媒体顶部媒体顶部媒体顶部媒体顶部媒体顶部...

    媒体中间

    媒体中间媒体中间媒体中间媒体中间媒体中间媒体中间媒体中间媒体中间媒体中间媒体中间媒体中间媒体中间媒体中间媒体中间媒体中间媒体中间媒体中间媒体中间媒体中间媒体中间媒体中间媒体中间媒体中间媒体中间媒体中间媒体中间媒体中间...

    媒体底部

    媒体底部媒体底部媒体底部媒体底部媒体底部媒体底部媒体底部媒体底部媒体底部媒体底部媒体底部媒体底部媒体底部媒体底部媒体底部媒体底部媒体底部媒体底部媒体底部媒体底部媒体底部媒体底部媒体底部媒体底部媒体底部媒体底部媒体底部...

  • 相关页面

上一节:
下一节: