Bootstrap媒体对象的学习使用，供大家参考，具体内容如下
Bootstrap媒体对象的学习使用，供大家参考，具体内容如下
<div class="media-body">
<h4 class="media-<a href="https://www.jb51.cc/tag/heading/" target="_blank" class="keywords">heading</a>">媒体<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a></h4>
<p>这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。</p>
</div>![通用的占位符图像](bg.jpg")
<div class="media-body">
<h4 class="media-<a href="https://www.jb51.cc/tag/heading/" target="_blank" class="keywords">heading</a>">媒体<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a></h4>
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
</div>媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用 class 来实现的。
（1）.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。 （2）.media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。
<div class="media-body">
<h4 class="media-<a href="https://www.jb51.cc/tag/heading/" target="_blank" class="keywords">heading</a>">媒体<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a></h4>
<p>这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。</p>
<!-- 嵌套的媒体对象 -->
<div class="media">
<a class="pull-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img class="media-object" src="bg.jpg"
alt="通用的占位符图像">
</a>
<div class="media-body">
<h4 class="media-<a href="https://www.jb51.cc/tag/heading/" target="_blank" class="keywords">heading</a>">嵌套的媒体<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a></h4>
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
<!-- 嵌套的媒体对象 -->
<div class="media">
<a class="pull-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img class="media-object" src="bg.jpg"
alt="通用的占位符图像">
</a>
<div class="media-body">
<h4 class="media-<a href="https://www.jb51.cc/tag/heading/" target="_blank" class="keywords">heading</a>">嵌套的媒体<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a></h4>
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
</div>
</div>
</div>
</div>
<!-- 嵌套的媒体对象 -->
<div class="media">
<a class="pull-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img class="media-object" src="bg.jpg"
alt="通用的占位符图像">
</a>
<div class="media-body">
<h4 class="media-<a href="https://www.jb51.cc/tag/heading/" target="_blank" class="keywords">heading</a>">嵌套的媒体<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a></h4>
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
</div>
</div>
</div><li class="media">
<img class="media-object" src="bg.jpg"
alt="通用的占位符图像">
<div class="media-body">
<h4 class="media-<a href="https://www.jb51.cc/tag/heading/" target="_blank" class="keywords">heading</a>">媒体<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a></h4>
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
</div>效果图：
