媒体
这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。
默认用法
默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。
示例
媒体标题
我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。然而，如果不是我内心深处坚信我的奋斗有希望，我就根本无法坚持。
媒体标题
我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。然而，如果不是我内心深处坚信我的奋斗有希望，我就根本无法坚持。
代码
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">...</h4>
<p class="media-meta"><span class="attr">...</span>...</p>
<p class="media-content">...</p>
</div>
</div>
...媒体对象大小
示例
小媒体对象
我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。然而，如果不是我内心深处坚信我的奋斗有希望，我就根本无法坚持。
默认媒体对象
我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。然而，如果不是我内心深处坚信我的奋斗有希望，我就根本无法坚持。
中媒体对象
我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。然而，如果不是我内心深处坚信我的奋斗有希望，我就根本无法坚持。
大媒体对象
我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。然而，如果不是我内心深处坚信我的奋斗有希望，我就根本无法坚持。
代码
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object media-object-sm" src="...">
</a>
</div>
<div class="media-body">...</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object media-object" src="...">
</a>
</div>
<div class="media-body">...</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object media-object-md" src="...">
</a>
</div>
<div class="media-body">...</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object media-object-lg" src="...">
</a>
</div>
<div class="media-body">...</div>
</div>媒体对齐
图片或其他媒体类型可以顶部、中部或底部对齐。默认是顶部对齐。
示例
媒体标题
我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。然而，如果不是我内心深处坚信我的奋斗有希望，我就根本无法坚持。
媒体标题
我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。然而，如果不是我内心深处坚信我的奋斗有希望，我就根本无法坚持。
代码
<div class="media">
<div class="media-body">...</div>
<div class="media-right">
<a href="#">
<img class="media-object" src="...">
</a>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="...">
</a>
</div>
<div class="media-body">...</div>
<div class="media-right">
<a href="#">
<img class="media-object" src="...">
</a>
</div>
</div>示例
左边顶部
我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。然而，如果不是我内心深处坚信我的奋斗有希望，我就根本无法坚持。我的奋斗有希望，因为这是一个自由的社会。在这里，我不止一次遇到过无法逾越的障碍，也不止一次经历过令人绝望的境况。但那时，思想与心灵的自由便能起作用，让我摆脱困境。如今我看着自己的孩子们，我知道我仍需要他们准备面对困难与歧视。
左边居中
我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。然而，如果不是我内心深处坚信我的奋斗有希望，我就根本无法坚持。我的奋斗有希望，因为这是一个自由的社会。在这里，我不止一次遇到过无法逾越的障碍，也不止一次经历过令人绝望的境况。但那时，思想与心灵的自由便能起作用，让我摆脱困境。如今我看着自己的孩子们，我知道我仍需要他们准备面对困难与歧视。
左边底部
我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。然而，如果不是我内心深处坚信我的奋斗有希望，我就根本无法坚持。我的奋斗有希望，因为这是一个自由的社会。在这里，我不止一次遇到过无法逾越的障碍，也不止一次经历过令人绝望的境况。但那时，思想与心灵的自由便能起作用，让我摆脱困境。如今我看着自己的孩子们，我知道我仍需要他们准备面对困难与歧视。
代码
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="...">
</a>
</div>
<div class="media-body">...</div>
</div>
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="...">
</a>
</div>
<div class="media-body">...</div>
</div>
<div class="media">
<div class="media-left media-bottom">
<a href="#">
<img class="media-object" src="...">
</a>
</div>
<div class="media-body">...</div>
</div>媒体列表
用一点点额外的标记，就能在列表内使用媒体对象组件（对评论或文章列表很有用）。
示例
-
媒体标题
我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。然而，如果不是我内心深处坚信我的奋斗有希望，我就根本无法坚持。
嵌套媒体标题
我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。然而，如果不是我内心深处坚信我的奋斗有希望，我就根本无法坚持。
嵌套媒体标题
我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。然而，如果不是我内心深处坚信我的奋斗有希望，我就根本无法坚持。
嵌套媒体标题
我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。然而，如果不是我内心深处坚信我的奋斗有希望，我就根本无法坚持。
代码
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">...</h4>
...
</div>
</li>
...
</ul>