7-14 媒体对象
本节编程练习不计算学习进度，请电脑登录imooc.com操作

媒体对象

在Web页面或者说移动页面制作中，常常看到这样的效果，左边居左（或居右），内容居右（或居左）排列，如下图所示：

我们常常把这样的效果称为媒体对象。可以说他是一种抽像的样式，可以用来构建不同类型的组件。这些组件都具有开篇所说的样式风格。那么在Bootstrap框架中特意将些部分提取出来做来一个组件介绍。其对应的版本文件：

  ☑ LESS版本：对应的源文件是media.less

  ☑ Sass版本：对应的源文件是_media.scss

  ☑ 编译后版本：对应bootstrap.css文件第4792行～第4819行

任务

index.html 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>媒体对象</title>
  6. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <h3>默认媒体对象</h3>
  10. <div class="media">
  11.     <a class="pull-left" href="#">
  12.         <img class="media-object" src="http://img1.sycdn.imooc.com//52e1d29d000161fe06000338-300-170.jpg" alt="...">
  13.   	</a>
  14.   	<div class="media-body">
  15.     	<h4 class="media-heading">系列：十天精通CSS3</h4>
  16.     	<div>全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！</div>
  17.   	</div>
  18. </div>
  19. <h3>媒体对象的嵌套</h3>
  20. <div class="media">
  21.     <a class="pull-left" href="#">
  22.     	<img class="media-object" src="http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031" alt="...">
  23. 	</a>
  24. 	<div class="media-body">
  25. 		<h4 class="media-heading">我是大漠</h4>
  26. 		<div>我是W3cplus站长大漠，我在写Bootstrap框中的媒体对象测试用例</div>
  27. 		<div class="media">
  28. 			<a class="pull-left" href="#">
  29. 				<img class="media-object" src="http://tp2.sinaimg.cn/3306361973/50/22875318196/0" alt="...">
  30. 			</a>
  31. 			<div class="media-body">
  32. 				<h4 class="media-heading">慕课网</h4>
  33. 				<div>大漠写的《玩转Bootstrap》系列教程即将会在慕课网上发布</div>
  34. 				<div class="media">
  35. 					<a class="pull-left" href="#">
  36. 						<img class="media-object" src="http://tp4.sinaimg.cn/1167075935/50/22838101204/1" alt="...">
  37. 					</a>
  38. 					<div class="media-body">
  39. 						<h4 class="media-heading">W3cplus</h4>
  40. 						<div>W3cplus站上还有很多教程....</div>
  41. 					</div>
  42. 				</div>
  43. 			</div>
  44. 		</div>
  45. 	</div>
  46. </div>
  47. <h3>媒体对象列表</h3>
  48. <ul class="media-list">
  49.     <li class="media">
  50.         <a class="pull-left" href="#">
  51.             <img class="media-object" src="http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031" alt="...">
  52.         </a>
  53.         <div class="media-body">
  54.             <h4 class="media-heading">我是大漠</h4>
  55.             <div>我是W3cplus站长大漠，我在写Bootstrap框中的媒体对象测试用例</div>
  56.         </div>
  57.     </li>
  58.     <li class="media">
  59.         <a class="pull-left" href="#">
  60.             <img class="media-object" src="http://tp2.sinaimg.cn/3306361973/50/22875318196/0" alt="...">
  61.         </a>
  62.         <div class="media-body">
  63.             <h4 class="media-heading">慕课网</h4>
  64.             <div>大漠写的《玩转Bootstrap》系列教程即将会在慕课网上发布</div>
  65.         </div>
  66.     </li>
  67.     <li class="media">
  68.         <a class="pull-left" href="#">
  69.             <img class="media-object" src="http://tp4.sinaimg.cn/1167075935/50/22838101204/1" alt="...">
  70.         </a>
  71.         <div class="media-body">
  72.             <h4 class="media-heading">W3cplus</h4>
  73.             <div>W3cplus站上还有很多教程....</div>
  74.         </div>
  75.     </li>
  76. </ul>
  77.   <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  78.   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
  79. </body>
  80. </html>
下一节