媒体组

媒体对象

框架用.media定义媒体对象，其效果为：

媒体对象标题

有个渔夫从海里捞到一颗大珍珠，爱不释手。然而，珍珠上面有一个小黑点。渔夫想，如能将小黑点去掉，珍珠将变成无价之宝。于是，它就用刀子把黑点刮掉。可是，刮掉一层，黑点仍在，再刮一层，黑点还在，刮到最后，黑点没了，珍珠也不复存在。

    <div class="media">
      <img data-src="..." alt="图片" class="margin-right" />
      <div class="media-body">
        <strong>媒体标题</strong>
        <p>...</p>
      </div>
    </div>
  

排列方式

在应用中，图片排列的方式需要较为灵活，可使用flex相关对齐属性，改变图片的显示位置。

图片在中间

使用flex的项目对齐样式.flex-self-start|center|end，可改变图片的显示位置。

媒体对象标题

有个渔夫从海里捞到一颗大珍珠，爱不释手。然而，珍珠上面有一个小黑点。渔夫想，如能将小黑点去掉，珍珠将变成无价之宝。于是，它就用刀子把黑点刮掉。可是，刮掉一层，黑点仍在，再刮一层，黑点还在，刮到最后，黑点没了，珍珠也不复存在。

一只小猪、一只绵羊和一头乳牛，被关在同一个畜栏里。有一次，牧人捉住小猪，牠大声号叫，猛烈地抗拒。绵羊和乳牛讨厌牠的号叫，便说：「他常常捉我们，我们并不大呼小叫。小猪听了回答道：「捉你们和捉我完全是两回事，他捉你们，只是要你们的毛和乳汁，但是捉住我，却是要我的命呢!

    <div class="media">
      <img data-src="..." alt="图片" class="margin-right flex-self-center" />
      <div class="media-body">
        <strong>媒体标题</strong>
        <p>...</p>
        <p>...</p>
      </div>
    </div>
  

图片在右侧

将图片调整到右侧即可。

媒体对象标题

有个渔夫从海里捞到一颗大珍珠，爱不释手。然而，珍珠上面有一个小黑点。渔夫想，如能将小黑点去掉，珍珠将变成无价之宝。于是，它就用刀子把黑点刮掉。可是，刮掉一层，黑点仍在，再刮一层，黑点还在，刮到最后，黑点没了，珍珠也不复存在。

一只小猪、一只绵羊和一头乳牛，被关在同一个畜栏里。有一次，牧人捉住小猪，牠大声号叫，猛烈地抗拒。绵羊和乳牛讨厌牠的号叫，便说：「他常常捉我们，我们并不大呼小叫。小猪听了回答道：「捉你们和捉我完全是两回事，他捉你们，只是要你们的毛和乳汁，但是捉住我，却是要我的命呢!

    <div class="media">
      <div class="media-body">
        <strong>媒体标题</strong>
        <p>...</p>
        <p>...</p>
      </div>
      <img data-src="..." alt="图片" class="margin-left flex-self-center" />
    </div>
  

嵌套

媒体对象标题

有个渔夫从海里捞到一颗大珍珠，爱不释手。然而，珍珠上面有一个小黑点。渔夫想，如能将小黑点去掉，珍珠将变成无价之宝。于是，它就用刀子把黑点刮掉。可是，刮掉一层，黑点仍在，再刮一层，黑点还在，刮到最后，黑点没了，珍珠也不复存在。

媒体对象标题

一只小猪、一只绵羊和一头乳牛，被关在同一个畜栏里。有一次，牧人捉住小猪，牠大声号叫，猛烈地抗拒。绵羊和乳牛讨厌牠的号叫，便说：「他常常捉我们，我们并不大呼小叫。小猪听了回答道：「捉你们和捉我完全是两回事，他捉你们，只是要你们的毛和乳汁，但是捉住我，却是要我的命呢!

    <div class="media">
      <img data-src="..." alt="图片" class="margin-right" />
      <div class="media-body">
        <strong>媒体标题</strong>
        <p>...</p>
        <div class="media">
          <img data-src="..." alt="图片" class="margin-right" />
          <div class="media-body">
            <strong>媒体标题</strong>
            <p>...</p>
          </div>
        </div>
      </div>
    </div>
  

纵排列

因.media用flex布局，也可以叠加.flex-column使媒体对象纵排列：

媒体对象标题

有个渔夫从海里捞到一颗大珍珠，爱不释手。然而，珍珠上面有一个小黑点。渔夫想，如能将小黑点去掉，珍珠将变成无价之宝。于是，它就用刀子把黑点刮掉。可是，刮掉一层，黑点仍在，再刮一层，黑点还在，刮到最后，黑点没了，珍珠也不复存在。

媒体对象标题

一只小猪、一只绵羊和一头乳牛，被关在同一个畜栏里。有一次，牧人捉住小猪，牠大声号叫，猛烈地抗拒。绵羊和乳牛讨厌牠的号叫，便说：「他常常捉我们，我们并不大呼小叫。小猪听了回答道：「捉你们和捉我完全是两回事，他捉你们，只是要你们的毛和乳汁，但是捉住我，却是要我的命呢!

    <div class="media flex-column">
      <img data-src="..." alt="图片" />
      <div class="media-body">
        <strong>媒体标题</strong>
        <p>...</p>
      </div>
    </div>

    <div class="media flex-column">
      <img data-src="..." alt="图片" class="flex-self-center" />
      <div class="media-body">
        <strong>媒体标题</strong>
        <p>...</p>
      </div>
    </div>
  

媒体组

多个媒体对象组合成为媒体组，用.media-group定义：

允许暇疵的存在

有个渔夫从海里捞到一颗大珍珠，爱不释手。然而，珍珠上面有一个小黑点。渔夫想，如能将小黑点去掉，珍珠将变成无价之宝。于是，它就用刀子把黑点刮掉。可是，刮掉一层，黑点仍在，再刮一层，黑点还在，刮到最后，黑点没了，珍珠也不复存在。

不一样的危机意识

一只小猪、一只绵羊和一头乳牛，被关在同一个畜栏里。有一次，牧人捉住小猪，牠大声号叫，猛烈地抗拒。绵羊和乳牛讨厌牠的号叫，便说：「他常常捉我们，我们并不大呼小叫。小猪听了回答道：「捉你们和捉我完全是两回事，他捉你们，只是要你们的毛和乳汁，但是捉住我，却是要我的命呢!

允许暇疵的存在

有个渔夫从海里捞到一颗大珍珠，爱不释手。然而，珍珠上面有一个小黑点。渔夫想，如能将小黑点去掉，珍珠将变成无价之宝。于是，它就用刀子把黑点刮掉。可是，刮掉一层，黑点仍在，再刮一层，黑点还在，刮到最后，黑点没了，珍珠也不复存在。

不一样的危机意识

一只小猪、一只绵羊和一头乳牛，被关在同一个畜栏里。有一次，牧人捉住小猪，牠大声号叫，猛烈地抗拒。绵羊和乳牛讨厌牠的号叫，便说：「他常常捉我们，我们并不大呼小叫。小猪听了回答道：「捉你们和捉我完全是两回事，他捉你们，只是要你们的毛和乳汁，但是捉住我，却是要我的命呢!

    <div class="media-group">
      <div class="media">
        <img data-src="..." alt="图片" class="margin-right" />
        <div class="media-body">
          <strong>允许暇疵的存在</strong>
          <p>...</p>
        </div>
      </div>
      <div class="media">
        <img data-src="..." alt="图片" class="margin-right" />
        <div class="media-body">
          <strong>不一样的危机意识</strong>
          <p>...</p>
        </div>
      </div>
      ...
    </div>