Bootstrap媒体对象列表
媒体列表
媒体列表,就是媒体的列表。由于媒体列表可以嵌套,因此很适合展示评论或其他需要以列表展示的信息。
媒体列表由 .media-list
的容器创建,其中包含一个或多个 .media
。由于它是列表,适合使用列表元素来定义。如,使用 <ul>
创建 .media-list
,使用 <li>
创建 .media
:
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img src="img/cat.jpg">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Lovely Cat</h4>
<p>Cras sit amet nibh libero, in gravida …… viverra turpis. </p>
</div>
</li>
<li class="media">...</li>
<li class="media">...</li>
</ul>
效果如图 3‑86所示:
图3-86 媒体列表
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。