多媒体对
Bootstrap 中的多媒体对象(Media Object):这些抽象的对象样式用于创 建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者 右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用 class 来实现的:
.media:该 class 允许将媒体对象里的多媒体(图像、视频、音频)浮动到内容区块的 左边或者右边。
.media-list:如果你需要一个列表,各项内容是无序列表的一部分,可以使用该 class。 可用于评论列表与文章列表。
.media-object:媒体标题
.media-body:媒体内容
.pull-left:媒体标题对象左浮动
.pull-right:媒体标题对象右浮动
.clearfix:清楚浮动
代码实例:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>多媒体对象</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body style="padding:50px;">
<!--
.media:该 class 允许将媒体对象里的多媒体(图像、视频、音频)浮动到内容区块的 左边或者右边。
.media-list:如果你需要一个列表,各项内容是无序列表的一部分,可以使用该 class。 可用于评论列表与文章列表。
.media-object:媒体标题
.media-body:媒体内容
.pull-left:媒体标题对象左浮动
.pull-right:媒体标题对象右浮动
.clearfix:清楚浮动
-->
<h2>多层嵌套媒体对象</h2>
<div class="media">
<a href="#" class="pull-left">
<img alt="媒体对象" class="media-object" src="../img/phone.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">媒体标题</h4>
这是一些示例文本,这是一些示例文本,
这是一些示例文本,这是一些示例文本,
这是一些示例文本,这是一些示例文本
<div class="media">
<a href="#" class="pull-left">
<img alt="媒体对象" class="media-object" src="../img/phone.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">媒体标题</h4>
这是一些示例文本,这是一些示例文本,
这是一些示例文本,这是一些示例文本,
这是一些示例文本,这是一些示例文本
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="../img/phone.jpg"
alt="媒体对象">
</a>
<div class="media-body">
<h4 class="media-heading">媒体标题</h4>
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
</div>
</div>
</div>
</div>
</div>
</div>
<h2>列表嵌套组媒体对象</h2>
<ul class="midia-list list-unstyled">
<li class="media">
<a href="#" class="pull-left" >
<img alt="媒体对象" class="media-object" src="../img/phone.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">媒体标题</h4>
这是一些示例文本1,这是一些示例文本2, 这是一些示例文本,这是一些示例文本, 这是一些示例文本,这是一些示例文本
</div>
</li>
<div class="clearfix"></div>
<li class="media">
<a href="#" class="pull-left">
<img alt="媒体对象" class="media-object" src="../img/phone.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">媒体标题</h4>
这是一些示例文本aa,这是一些示例文本bb, 这是一些示例文本,这是一些示例文本, 这是一些示例文本,这是一些示例文本
</div>
</li>
<div class="clearfix"></div>
<li class="media">
<a href="#" class="pull-right">
<img alt="媒体对象" class="media-object" src="../img/phone.jpg">
</a>
<div class="media-body">
<h4 class="media-heading">媒体标题</h4>
这是一些示例文本aa,这是一些示例文本bb, 这是一些示例文本,这是一些示例文本, 这是一些示例文本,这是一些示例文本
</div>
</li>
</ul>
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
显示效果: