Bootstrap 多媒体对象（Media Object）

Bootstrap多媒体对象（MediaObject）本章我们将讲解Bootstrap中的多媒体对象（MediaObject），如：图像、视频、音频等。多媒体对象的样式可用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。接下来我们先来看个实例：实例<!--左对齐--><divclass="media"><divclass="media-left"><imgsrc="img_avatar1.png"class="media-object"style="width:60px"></div><divclass="media-body"><h4class="media-heading">RUNOOB</h4><p>这是一些示例文本...</p></div></div><!--右对齐--><divclass="media"><divclass="media-body"><h4class="media-heading">RUNOOB</h4><p>这是一些示例文本...</p></div><divclass="media-right"><imgsrc="img_avatar1.png"class="media-object"style="width:60px"></div></div>尝试一下?结果如下所示：实例解析在<div>元素上添加.media类来创建一个多媒体对象。使用.media-left类让多媒体对象(图片)来实现左对齐，同样.media-right类实现了右对齐。文本内容放在class="media-body"的div中，图片左对齐则放在class="media-body"之前，图片右对齐则放在class="media-body"之后。此外，你还可以使用.media-heading类来设置标题。让我们来看看下面这个有关媒体对象列表.media-list的实例：顶部、底部、居中对齐实例<!--置顶--><divclass="media"><divclass="media-leftmedia-top"><imgsrc="img_avatar1.png"class="media-object"style="width:60px"></div><divclass="media-body"><h4class="media-heading">置顶</h4><p>这是一些示例文本...</p></div></div><!--居中对齐--><divclass="media"><divclass="media-leftmedia-middle"><imgsrc="img_avatar1.png"class="media-object"style="width:60px"></div><divclass="media-body"><h4class="media-heading">居中</h4><p>这是一些示例文本...</p></div></div><!--置底--><divclass="media"><divclass="media-leftmedia-bottom"><imgsrc="img_avatar1.png"class="media-object"style="width:60px"></div><divclass="media-body"><h4class="media-heading">置底</h4><p>这是一些示例文本...</p></div></div>尝试一下?结果如下所示：内嵌多媒体对象一个多媒体对象内还可以包含多个多媒体对象：实例<divclass="media"><divclass="media-left"><imgsrc="https://static.k88.net/images/mix/img_avatar.png"class="media-object"style="width:45px"></div><divclass="media-body"><h4class="media-heading">RUNOOB-1<small><i>PostedonFebruary19,2016</i></small></h4><p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p><!--内嵌多媒体对象--><divclass="media"><divclass="media-left"><imgsrc="https://static.k88.net/images/mix/img_avatar.png"class="media-object"style="width:45px"></div><divclass="media-body"><h4class="media-heading">RUNOOB-2<small><i>PostedonFebruary19,2016</i></small></h4><p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p><!--内嵌多媒体对象--><divclass="media"><divclass="media-left"><imgsrc="https://static.k88.net/images/mix/img_avatar.png"class="media-object"style="width:45px"></div><divclass="media-body"><h4class="media-heading">RUNOOB-3<small><i>PostedonFebruary19,2016</i></small></h4><p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p></div></div></div></div></div></div>尝试一下?实例<divclass="media"><divclass="media-left"><imgsrc="https://static.k88.net/images/mix/img_avatar.png"class="media-object"style="width:45px"></div><divclass="media-body"><h4class="media-heading">RUNOOB-1<small><i>PostedonFebruary19,2016</i></small></h4><p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p><!--内嵌多媒体对象--><divclass="media"><divclass="media-left"><imgsrc="https://static.k88.net/images/mix/img_avatar.png"class="media-object"style="width:45px"></div><divclass="media-body"><h4class="media-heading">RUNOOB-2<small><i>PostedonFebruary20,2016</i></small></h4><p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p><!--内嵌多媒体对象--><divclass="media"><divclass="media-left"><imgsrc="https://static.k88.net/images/mix/img_avatar.png"class="media-object"style="width:45px"></div><divclass="media-body"><h4class="media-heading">RUNOOB-3<small><i>PostedonFebruary21,2016</i></small></h4><p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p></div></div></div><!--内嵌多媒体对象--><divclass="media"><divclass="media-left"><imgsrc="https://static.k88.net/images/mix/img_avatar.png"class="media-object"style="width:45px"></div><divclass="media-body"><h4class="media-heading">RUNOOB-4<small><i>PostedonFebruary20,2016</i></small></h4><p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p></div></div></div></div><!--内嵌多媒体对象--><divclass="media"><divclass="media-left"><imgsrc="https://static.k88.net/images/mix/img_avatar.png"class="media-object"style="width:45px"></div><divclass="media-body"><h4class="media-heading">RUNOOB-5<small><i>PostedonFebruary19,2016</i></small></h4><p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p></div></div></div>尝试一下?