这篇文章主要为大家展示了“Bootstrap媒体对象怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Bootstrap媒体对象怎么用”这篇文章吧。
具体内容如下
基本结构：
<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">
<h5 class="media-heading">媒体标题</h5>
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
</div>
</div><ul class="media-list">
<li 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">
<h5 class="media-heading">媒体标题</h5>
<p>这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。</p>
</div>
</li>
<li class="media">
<a class="pull-right" 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">
<h5 class="media-heading">媒体标题</h5>
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
</div>
</li>
</ul>媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用 class 来实现的。
在 HTML 标签中添加以下两种形式来设置媒体对象：
（1）.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。
（2）.media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。
嵌套的媒体对象：
<ul class="media-list">
<li 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">
<h5 class="media-heading">媒体标题</h5>
<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">
<h5 class="media-heading">嵌套的媒体标题</h5>
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
<!-- 嵌套的媒体对象 -->
<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">
<h5 class="media-heading">嵌套的媒体标题</h5>
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
</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">
<h5 class="media-heading">嵌套的媒体标题</h5>
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
</div>
</div>
</div>
</li>
<li class="media">
<a class="pull-right" 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">
<h5 class="media-heading">媒体标题</h5>
这是一些示例文本。这是一些示例文本。
这是一些示例文本。这是一些示例文本。
</div>
</li>
</ul>效果图：
以上是“Bootstrap媒体对象怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
