7-2 缩略图（二）
本节编程练习不计算学习进度，请电脑登录imooc.com操作

缩略图（二）

上一小节，展示的仅只有缩略图的一种使用方式，除了这种方式之外，还可以让缩略图配合标题、描述内容，按钮等：

在仅有缩略图的基础上，添加了一个div名为“caption“的容器，在这个容器中放置其他内容，比如说标题，文本描述，按钮等：

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="http://a.hiphotos.baidu.com/image/w%3D400/sign=c56d7638b0b7d0a27bc9059dfbee760d/3b292df5e0fe9925d46873da36a85edf8cb171d7.jpg" style="height: 180px; width: 100%; display: block;" alt="">
            </a>
            <div class="caption">
                <h3>Bootstrap框架系列教程</h3>
                <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
                <p>
                    <a href="##" class="btn btn-primary">开始学习</a>
                    <a href="##" class="btn btn-info">正在学习</a>
                </p>
            </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. <h1>复杂的缩略图</h1>
  10. <div class="container">
  11.     <div class="row">
  12. 		<div class="col-xs-6 col-md-3">
  13. 			<a href="#" class="thumbnail">
  14. 				<img src="http://img1.sycdn.imooc.com//5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">
  15. 			</a>
  16. 			<div class="caption">
  17. 				<h3>Bootstrap框架系列教程</h3>
  18. 				<p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
  19. 				<p>
  20. 					<a href="##" class="btn btn-primary">开始学习</a>
  21. 					<a href="##" class="btn btn-info">正在学习</a>
  22. 				</p>
  23. 			</div>  
  24. 		</div>
  25. 	    <div class="col-xs-6 col-md-3">
  26. 	    	<a href="#" class="thumbnail">
  27. 		    	<img alt="100%x180" src="http://img1.sycdn.imooc.com//5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
  28. 		    </a>
  29. 		    <div class="caption">
  30. 		    	<h3>Bootstrap框架系列教程</h3>
  31. 	    		<p>	Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
  32. 		    	<p>
  33. 			    	<a href="##" class="btn btn-primary">开始学习</a>
  34. 		    		<a href="##" class="btn btn-info">正在学习</a>
  35. 			    </p>
  36. 		    </div>   
  37.     	</div>
  38.     	<div class="col-xs-6 col-md-3">
  39. 		    <a href="#" class="thumbnail">
  40. 			    <img alt="100%x180" src="http://img1.sycdn.imooc.com//5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
  41. 		    </a>
  42. 		    <div class="caption">
  43. 			    <h3>Bootstrap框架系列教程</h3>
  44. 				    <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
  45. 				    <p>
  46. 				    	<a href="##" class="btn btn-primary">开始学习</a>
  47. 				    	<a href="##" class="btn btn-info">正在学习</a>
  48. 			    	</p>
  49. 		    </div>   
  50. 	    </div>
  51. 	    <div class="col-xs-6 col-md-3">
  52. 	    	<a href="#" class="thumbnail">
  53. 			    <img alt="100%x180" src="http://img1.sycdn.imooc.com//5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
  54. 		    </a>
  55. 		    <div class="caption">
  56. 			    <h3>Bootstrap框架系列教程</h3>
  57. 		    	<p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
  58. 		    	<p>
  59. 			    	<a href="##" class="btn btn-primary">开始学习</a>
  60. 			    	<a href="##" class="btn btn-info">正在学习</a>
  61. 			    </p>
  62. 	    	</div>   
  63. 	    </div>
  64. 	</div>
  65. </div>
  66. <!--下面是代码任务部分--->
  67. <h2>下面是代码任务部分</h2>
  68. <div class="container">
  69.     <div class="row">
  70.     	<div class="col-xs-6 col-md-3">
  71. 			<a href="#" class="thumbnail">
  72. 				<img src="http://img1.sycdn.imooc.com//5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">
  73. 			</a>
  74.  
  75. 		</div>
  76. 	    <div class="col-xs-6 col-md-3">
  77. 	    	<a href="#" class="thumbnail">
  78. 		    	<img alt="100%x180" src="http://img1.sycdn.imooc.com//5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
  79. 		    </a>
  80.  
  81.     	</div>
  82.     	<div class="col-xs-6 col-md-3">
  83. 		    <a href="#" class="thumbnail">
  84. 			    <img alt="100%x180" src="http://img1.sycdn.imooc.com//5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
  85. 		    </a>
  86.  
  87. 	    </div>
  88. 	    <div class="col-xs-6 col-md-3">
  89. 	    	<a href="#" class="thumbnail">
  90. 			    <img alt="100%x180" src="http://img1.sycdn.imooc.com//5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
  91. 		    </a>
  92.  
  93. 	    </div>
  94. 	</div>
  95. </div>
  96.   <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  97.   <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
  98. </body>
  99. </html>
  1. body {
  2.   padding: 20px;
  3. }
下一节