Bootstrap4 基础教程

Bootstrap4 多媒体对象

如果要创建一个包含左对齐或右对齐媒体对象（例如图像或视频）以及文本内容（例如博客评论，Tweets等）的布局，则可以使用新引入的Bootstrap媒体组件轻松地做到这一点。

Bootstrap 提供了很好的方式来处理多媒体对象（图片或视频）和内容的布局。应用场景有博客评论、微博等:

基础多媒体对象

要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body  类，然后添加外边距，内边距等效果:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>多媒体对象</h2>
  <p>使用 .media 和 .media-body 类创建多媒体对象:</p>
  <div class="media border p-3">
    <img src="http://www.xxs100.com/run/images/img_avatar.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
    <div class="media-body">
      <h4>基础教程网</h4>
      <p>学好基础,才能走的更远！！！</p>      
    </div>
  </div>
</div>
</body>
</html>
测试看看

运行后效果如下：

图片.png

多媒体对象嵌套

多媒体对象可以多个嵌套（一个多媒体对象中包含另外一个多媒体对象）

要嵌套多媒体对象，可以把新的 .media 容器放到 .media-body 容器中:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>多媒体对象嵌套</h2>
  <p>多媒体对象可以多个嵌套（一个多媒体对象中包含另外一个多媒体对象）:</p><br>
  <div class="media border p-3">
    <img src="http://www.xxs100.com/run/images/img_avatar.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
    <div class="media-body">
      <h4>基础教程网</h4>
      <p>学好基础,才能走的更远！！！</p>
      <div class="media p-3">
        <img src="http://www.xxs100.com/run/images/img_avatar.png" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
        <div class="media-body">
          <h4>基础教程网</h4>
          <p>学好基础,才能走的更远！！！</p>
        </div>
      </div>  
    </div>
  </div>
</div>
</body>
</html>
测试看看

多媒体对象图片显示在右边

如果你想将头像图片显示在右侧，可以在 .media-body 容器后添加图片:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>图片显示在右边</h2>
  <p>如果你想将头像图片显示在右侧，可以在 .media-body 容器后添加图片:</p>
  <div class="media border p-3">
    <div class="media-body">
      <h4>基础教程网</h4>
      <p>学好基础,才能走的更远！！！</p>      
    </div>
    <img src="http://www.xxs100.com/run/images/img_avatar.png" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
  </div>
</div>
</body>
</html>
测试看看

定位多媒体图片位置

我们可以使用 align-self-* 相关类来设置多媒体对象的图片显示位置：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>多媒体对象</h2>
  <p>我们可以使用 align-self-* 相关类来设置多媒体对象的图片显示位置：</p><br>
  <!-- 头部 -->
  <div class="media">
    <img src="http://www.xxs100.com/run/images/img_avatar.png" class="align-self-start mr-3" style="width:60px">
    <div class="media-body">
      <h4>头部 -- 基础教程(xxs100.com)</h4>
      <p>学好基础,才能走的更远！！
      <p>学好基础,才能走的更远！！
      <p>学好基础,才能走的更远！！
    </div>
  </div>
  <!-- 居中 -->
  <div class="media mt-3">
    <img src="http://www.xxs100.com/run/images/img_avatar.png" class="align-self-center mr-3" style="width:60px">
    <div class="media-body">
      <h4>居中 -- 基础教程(xxs100.com)</h4>
      <p>学好基础,才能走的更远！！
      <p>学好基础,才能走的更远！！
      <p>学好基础,才能走的更远！！
    </div>
   </div>
  <!-- 底部 -->
  <div class="media mt-3">
    <img src="http://www.xxs100.com/run/images/img_avatar.png" class="align-self-end mr-3" style="width:60px">
    <div class="media-body">
      <h4>底部 -- 基础教程(xxs100.com)</h4>
      <p>学好基础,才能走的更远！！
      <p>学好基础,才能走的更远！！
      <p>学好基础,才能走的更远！！
    </div>
  </div>
</div>
</body>
</html>
测试看看
Bootstrap4 Flex 布局