.media——指定该元素包裹媒体对象组件；
.media-left——设置媒体对象的多媒体内容居左；
.media-right——设置媒体对象的多媒体内容居右；
.media-middle——设置媒体对象的多媒体内容上下居中；
.media-bottom——设置媒体对象的多媒体内容居底；
.media-body——设置媒体对象的文本内容部分；
.meida-heading——设置h4元素为文本内容的标题；
.media-list——用来设置包裹媒体对象的列表元素；
<!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" type="text/css">
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
body{
margin:10px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="media">
<a href="#" class="media-left">
<img src="images/header.jpg" alt="头像" width="64"/>
</a>
<div class="media-body">
<h4 class="media-heading">亚投行，美国怎么看？</h4>
<p>小马哥则是开门见山，大肆宣扬：“我们对亚投行深感兴趣，拜托，给个门票呗。” 行政院长”毛治国20日表示,如果台湾收到邀请参加亚投行,到时候再评估。还真给力啊，当自己是盘菜。</p>
<div class="media">
<a href="#" class="media-left">
<img src="images/header.jpg" alt="头像" width="64"/>
</a>
<div class="media-body">
<h4 class="media-heading">亚投行，约吗？</h4>
<p>要说邀请，也不是味，“我们欢迎美国加入亚投行成为股东”。根据美国的GDP，就又拿了大头，欧洲几大国心里怕就不是味了。刚刚挣脱了魔爪，一转身，又黏糊一堆去了。更何况，美国加入，不定生出什么事来呢，一个日本不算回事，加上美帝，这个股东大会，就不那么好开了。</p>
</div>
</div>
</div>
</div>
<hr/>
<div class="media">
<div class="media-body">
<h4 class="media-heading">韩国没时间考虑了</h4>
<p>这边股东还没凑齐整，那边印尼就开始闹腾了，这个亚投行的总部，要设在雅加达。朴阿姨到如今也没个响声，据说也是有个条件，若这个总部设在首尔，韩国就立即加入。</p>
</div>
<a href="#" class="media-right">
<img src="images/header.jpg" alt="头像" width="64"/>
</a>
</div>
<hr/>
<div class="media">
<a href="#" class="media-left media-middle">
<img src="images/header.jpg" alt="头像" width="64"/>
</a>
<div class="media-body">
<h4 class="media-heading">关于绿皮火车</h4>
<p>这本《绿皮火车》以“路”“歌”和“人”三个主题，收集了老周从2011年到2012年初期间写的一些杂文，在这些文字里看到了一个最真实的老周。现在的周云蓬已不再是那个默默无闻在街边和酒吧卖唱的歌手了，但是他依然是那个用最真诚的声音，最真切的文字，与这个世界交流的人。想起上海电影节期间绿妖说的一个小故事：上海回绍兴，动车无座，老周变娇气了，一路站着一路发着牢骚，还念念不忘昨天的辉煌：＂昨天还走红地毯呢今儿就成流浪汉了＂。虽然绿妖说：“这岂非他的《绿皮火车》里最常见的遭遇，老周忘本呀。”作为旁观者，看过忍不住一笑。喜欢老周和绿妖，就是因为他们的这份真实不做作。 </p>
</div>
</div>
<hr/>
<div class="media">
<a href="#" class="media-left media-bottom">
<img src="images/header.jpg" alt="头像" width="64"/>
</a>
<div class="media-body">
<h4 class="media-heading">为什么要读《绿皮火车》</h4>
<p>这本书的封面兼具小清新和怀旧之感，白色页面上驶过一辆慢慢悠悠的绿皮火车，火车画得还很童趣，十分讨人喜欢。有过唯一的一次绿皮火车经历，几年前从苏州到上海，车票很紧张，好不容易7块钱买到一张站票，但是上车的时候被震惊了，不是说没坐的吗？怎么每节车厢都这么空荡荡的，只有横七竖八地躺着的几个人，而且非常准点的到站了。于是，绿皮火车给我留下了一段惊喜而有趣的回忆。 </p>
</div>
</div>
<hr/>
<ul class="media-list">
<li class="media">
<a href="#" class="media-left">
<img src="images/header.jpg" alt="头像" width="64"/>
</a>
<div class="media-body">
<h4 class="media-heading">《春天责备》</h4>
<p>两年前读罢《春天责备》，觉得老周面前，自己是那么的弱小；而读完这本《绿皮火车》，又觉得面对生活，我们是多么的浮躁。今天看到一句很喜欢的话，理查德?耶茨说：“你以为挑起生活的担子是勇气，其实去过自己真正想要的生活才更需要勇气。”我想，我们缺少的就是老周那样的勇气，所以我们只能在现实的泥潭中继续挣扎。 </p>
</div>
</li>
<li class="media">
<a href="#" class="media-left">
<img src="images/header.jpg" alt="头像" width="64"/>
</a>
<div class="media-body">
<h4 class="media-heading">《春天责备》</h4>
<p>两年前读罢《春天责备》，觉得老周面前，自己是那么的弱小；而读完这本《绿皮火车》，又觉得面对生活，我们是多么的浮躁。今天看到一句很喜欢的话，理查德?耶茨说：“你以为挑起生活的担子是勇气，其实去过自己真正想要的生活才更需要勇气。”我想，我们缺少的就是老周那样的勇气，所以我们只能在现实的泥潭中继续挣扎。 </p>
</div>
</li>
<li class="media">
<a href="#" class="media-left">
<img src="images/header.jpg" alt="头像" width="64"/>
</a>
<div class="media-body">
<h4 class="media-heading">《春天责备》</h4>
<p>两年前读罢《春天责备》，觉得老周面前，自己是那么的弱小；而读完这本《绿皮火车》，又觉得面对生活，我们是多么的浮躁。今天看到一句很喜欢的话，理查德?耶茨说：“你以为挑起生活的担子是勇气，其实去过自己真正想要的生活才更需要勇气。”我想，我们缺少的就是老周那样的勇气，所以我们只能在现实的泥潭中继续挣扎。 </p>
</div>
</li>
</ul>
</div>
</body>
</html>
版权声明：本文为博主原创文章，未经博主允许不得转载。
原文地址：http://blog.csdn.net/bboyjoe/article/details/47186265
