Bootstrap 多媒体对象


多媒体对象

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

Demo Avatar John Doe

John Doe Posted on February 19, 2016

这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本。

Demo Avatar Jane Doe

Jane Doe Posted on February 20, 2016

这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本。


Alicia Keyes Posted on February 25, 2016

这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本。 Nulla vel metus scelerisque ante sollicitudin commodo.

Demo Avatar Alicia Keyes

基础多媒体对象

Demo Avatar John Doe Blank

John Doe

这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本。


John Doe

这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本。

Demo Avatar John Doe Blank

实例

<!-- 左对齐 -->
<div class="media">
  <div class="media-left">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">John Doe</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>

<!-- 右对齐 -->
<div class="media">
  <div class="media-body">
    <h4 class="media-heading">John Doe</h4>
    <p>这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本。</p>
  </div>
  <div class="media-right">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
</div>
亲自试一试 »

实例解析

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

使用 .media-left 类将媒体对象(图像)向左对齐,或使用 .media-right 类将其向右对齐。

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

此外,您还可以使用 .media-heading 作为标题。



顶部、中间或底部对齐

我们可以使用 media-top, media-middle or media-bottom 相关类来设置多媒体对象的图片显示位置:

Demo Avatar John Doe Blank

媒体置顶

这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本。

这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本。

这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本。


Demo Avatar John Doe Blank

媒体居中

这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本。

这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本。

这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本。


Demo Avatar John Doe Blank

媒体置底

这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本。

这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本。

这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本。

实例

<!-- 媒体顶部 -->
<div class="media">
  <div class="media-left media-top">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media Top</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>

<!-- 媒体中间 -->
<div class="media">
  <div class="media-left media-middle">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media Middle</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>

<!-- 媒体底部 -->
<div class="media">
  <div class="media-left media-bottom">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media Bottom</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>
亲自试一试 »

多媒体对象嵌套

多媒体对象可以多个嵌套(一个多媒体对象中包含另外一个多媒体对象):

实例

Demo Avatar John Doe Blank

John Doe Posted on February 19, 2016

这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本。

Demo Avatar John Doe Green

John Doe Posted on February 20, 2016

这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本。

Demo Avatar John Doe Blue

John Doe Posted on February 21, 2016

这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本。

亲自试一试 »

多媒体对象嵌套的另一个例子

实例

Demo Avatar John Doe Blank

John Doe Posted on February 19, 2016

这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本。

Demo Avatar John Doe Green

John Doe Posted on February 20, 2016

这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本。

Demo Avatar John Doe Blue

John Doe Posted on February 21, 2016

这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本。

Demo Avatar Jane Doe Green

Jane Doe Posted on February 20, 2016

这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本。

Demo Avatar Jane Doe Red

Jane Doe Posted on February 19, 2016

这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本,这是一些示例文本。

亲自试一试 »