在本教程中，我们将了解Bootstrap中的媒体对象。

在Bootstrap中，我们可以使用媒体对象来创建组件，例如博客评论，推文等。

默认媒体对象

为了创建媒体对象，我们使用.media类。

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object"
           src="/path/to/image"
           alt="profile-image">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    <p>Some text goes here....</p>
  </div>
</div>

对于上面的代码，我使用了尺寸为48px宽度和48px高度的图像。

媒体居右

为了使媒体对象中的图像位于右侧，我们使用.media-right类。

.media-rightdiv必须放在.media-bodydiv之后。

<div class="media">
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    <p>Some text goes here....</p>
  </div>
  <div class="media-right">
    <a href="#">
      <img class="media-object"
           src="/path/to/image"
           alt="profile-image">
    </a>
  </div>
</div>

对于上面的代码，我使用了尺寸为48px宽度和48px高度的图像。

媒体对齐

我们可以使用以下.media-middle和.media-bottom类来对齐媒体。

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object"
           src="/path/to/image"
           alt="profile-image"
           style="width: 48px; height: 48px;">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry....</p>
  </div>
</div>

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object"
           src="/path/to/image"
           alt="profile-image"
           style="width: 48px; height: 48px;">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
  </div>
</div>

<div class="media">
  <div class="media-left media-bottom">
    <a href="#">
      <img class="media-object"
           src="/path/to/image"
           alt="profile-image"
           style="width: 48px; height: 48px;">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
  </div>
</div>

媒体列表

这可用于在博客或者中创建评论。
要创建媒体列表，我们使用.media-list类。

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object"
             src="/path/to/image.png"
             alt="profile-image"
             style="width: 48px; height: 48px;">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      <p>some text goes here...</p>
      
      <ul class="media-list">
        <li class="media">
          <div class="media-left">
            <a href="#">
              <img class="media-object"
                   src="/path/to/image.png"
                   alt="profile-image"
                   style="width: 48px; height: 48px;">
            </a>
          </div>
          <div class="media-body">
            <h4 class="media-heading">Media heading</h4>
            <p>some text goes here...</p>
          </div>
        </li>
        <li class="media">
          <div class="media-left">
            <a href="#">
              <img class="media-object"
                   src="/path/to/image.png"
                   alt="profile-image"
                   style="width: 48px; height: 48px;">
            </a>
          </div>
          <div class="media-body">
            <h4 class="media-heading">Media heading</h4>
            <p>some text goes here...</p>
          </div>
        </li>
      </ul>
      
    </div>
  </li>
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object"
             src="/path/to/image.png"
             alt="profile-image"
             style="width: 48px; height: 48px;">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      <p>some text goes here...</p>
    </div>
  </li>
</ul>