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

媒体对象--媒体对象的嵌套

在评论系统中，常常能看到下图的效果：

从外往里看，这里有三个媒体对象，只不过是一个嵌套在另一个的里面。那么在Bootstrap框架中的媒体对象也具备这样的功能，只需要将另一个媒体对象结构放置在媒体对象的主体内“media-body”，如下所示：

<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="…" alt="...">
    </a>
    <div class="media-body">
        <h4 class="media-heading">Media Heading</h4>
        <div>…</div>
        <div class="media">
            <a class="pull-left" href="#">
                <img class="media-object" src="…" alt="...">
            </a>
            <div class="media-body">
                <h4 class="media-heading">Media Heading</h4>
                <div>…</div>
                <div class="media">
                    <a class="pull-left" href="#">
                        <img class="media-object" src="…" alt="...">
                    </a>
                    <div class="media-body">
                        <h4 class="media-heading">Media Heading</h4>
                        <div>...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

在确保你的结构没有嵌套错的情况下，能直接看到下图这样的效果：

 

任务

index.htmlstyle.css 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; 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. <div class="media">
  10.     <a class="pull-left" href="#">
  11. 		<img class="media-object" src="http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031" alt="...">
  12. 	</a>
  13. 	<div class="media-body">
  14. 		<h4 class="media-heading">我是大漠</h4>
  15. 		<div>我是W3cplus站长大漠，我在写Bootstrap框中的媒体对象测试用例</div>
  16. 		<div class="media">
  17. 			<a class="pull-left" href="#">
  18. 				<img class="media-object" src="http://tp2.sinaimg.cn/3306361973/50/22875318196/0" alt="...">
  19. 			</a>
  20. 			<div class="media-body">
  21. 				<h4 class="media-heading">慕课网</h4>
  22. 				<div>大漠写的《玩转Bootstrap》系列教程即将会在慕课网上发布</div>
  23. 				<div class="media">
  24. 					<a class="pull-left" href="#">
  25. 						<img class="media-object" src="http://tp4.sinaimg.cn/1167075935/50/22838101204/1" alt="...">
  26. 					</a>
  27. 					<div class="media-body">
  28. 						<h4 class="media-heading">W3cplus</h4>
  29. 						<div>W3cplus站上还有很多教程....</div>
  30. 					</div>
  31. 				</div>
  32. 			</div>
  33. 		</div>
  34. 	</div>
  35. </div>
  36.   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  37.   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
  38. </body>
  39. </html>
  1. body {
  2.   padding: 30px 100px;
  3. }
下一节