Bootstrap 多媒体对象.pdfVIP

Bootstrap 多媒体对象 Bootstrap 多媒体对象 （Media Object ） 本章我们将讲解 Bootstrap 中的多媒体对象 （Media Object ）。这些抽象的对象样式⽤ 于创建各种类型的组 （⽐如：博客评论），我们可以在组 中使⽤图⽂混排，图像 可以左对齐或者右对齐。媒体对象可以⽤更少的代码来实现媒体对象与⽂字的混排。 媒体对象轻量标记、易于扩展的特性是通过向简单的标记应⽤ class 来实现的。你可 以在 HTML 标签中添加以下两种形式来设置媒体对象： .media ：该 class 允许将媒体对象⾥的多媒体 （图像、视频、⾳频）浮动到内容 区块的左边或者右边。 .media-list ：如果你需要⼀个列表，各项内容是⽆序列表的⼀部分，可以使⽤该 class 。可⽤于评论列表与⽂章列表。 让我们来看看下⾯这个有关默认的媒体对象 .media 的实例： !DOCTYPE html html head titleBootstrap 实例 - 默认的媒体对象/title link href=/ ootstrap/css/ ootstrap.min.css rel=stylesheet script src=/scripts/jquery .min.js/script script src=/ ootstrap/js/ ootstrap.min.js/script /head ody div class=media a class=pull-left href=# img class=media-o ject src=/attachments/uploads/2014/06/ /a div class=media- ody h4 class=media-heading媒体标题/h4 这是⼀些示例⽂本。这是⼀些示例⽂本。 这是⼀些示例⽂本。这是⼀些示例⽂本。 这是⼀些示例⽂本。这是⼀些示例⽂本。 这是⼀些示例⽂本。这是⼀些示例⽂本。 这是⼀些示例⽂本。这是⼀些示例⽂本。 /div /div div class=media a class=pull-left href=# img class=media-o ject src=/attachments/uploads/2014/06/ /a div class=media- ody h4 class=media-heading媒体标题/h4 这是⼀些示例⽂本。这是⼀些示例⽂本。 这是⼀些示例⽂本。这是⼀些示例⽂本。 这是⼀些示例⽂本。这是⼀些示例⽂本。 这是⼀些示例⽂本。这是⼀些示例⽂本。 这是⼀些示例⽂本。这是⼀些示例⽂本。 div class=media a class=pull-left href=# img class=media-o ject src=/attachments/uploads/20 /a div class=media- ody h4 class=media-heading媒体标题/h4 这是⼀些示例⽂本。这是⼀些示例⽂本。 这是⼀些示例⽂本。这是⼀些示例⽂本。 这是⼀些示例⽂本。这是⼀些示例⽂本。 这是⼀些示例⽂本。这是⼀些示例⽂本。 这是⼀些示例⽂本。这是⼀些示例⽂本。 /div /div /div /div / ody /html 尝试⼀下 » 结果如下所⽰： 让我们来看看下⾯这个有关媒体对象列表 .media-list 的实例： !DOCTYPE html html head titleBootstrap 实例 - 媒体对象列表/title link href=/ ootstrap/css/ ootstrap.min.css rel=stylesheet script src=/scripts/jquery .min.js/script script src=/