縮略圖（二）
上一小節(jié)，展示的僅只有縮略圖的一種使用方式，除了這種方式之外，還可以讓縮略圖配合標(biāo)題、描述內(nèi)容，按鈕等：
在僅有縮略圖的基礎(chǔ)上，添加了一個(gè)div名為“caption“的容器，在這個(gè)容器中放置其他內(nèi)容，比如說(shuō)標(biāo)題，文本描述，按鈕等：
<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框架是一個(gè)優(yōu)秀的前端框，就算您是一位后端程序員或者你是一位不懂設(shè)計(jì)的前端人員，你也能依賴于Bootstrap制作做優(yōu)美的網(wǎng)站...</p>
<p>
<a href="##" class="btn btn-primary">開(kāi)始學(xué)習(xí)</a>
<a href="##" class="btn btn-info">正在學(xué)習(xí)</a>
</p>
</div>
</div>
…
</div>
</div>
任務(wù)
我來(lái)試試：為右側(cè)代碼補(bǔ)充縮略圖的標(biāo)題、描述內(nèi)容及按鈕。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>縮略圖</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<h1>復(fù)雜的縮略圖</h1>
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://img1.sycdn.imooc.com//5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">
</a>
<div class="caption">
<h3>Bootstrap框架系列教程</h3>
<p>Bootstrap框架是一個(gè)優(yōu)秀的前端框，就算您是一位后端程序員或者你是一位不懂設(shè)計(jì)的前端人員，你也能依賴于Bootstrap制作做優(yōu)美的網(wǎng)站...</p>
<p>
<a href="##" class="btn btn-primary">開(kāi)始學(xué)習(xí)</a>
<a href="##" class="btn btn-info">正在學(xué)習(xí)</a>
</p>
</div>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img alt="100%x180" src="http://img1.sycdn.imooc.com//5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
</a>
<div class="caption">
<h3>Bootstrap框架系列教程</h3>
<p> Bootstrap框架是一個(gè)優(yōu)秀的前端框，就算您是一位后端程序員或者你是一位不懂設(shè)計(jì)的前端人員，你也能依賴于Bootstrap制作做優(yōu)美的網(wǎng)站...</p>
<p>
<a href="##" class="btn btn-primary">開(kāi)始學(xué)習(xí)</a>
<a href="##" class="btn btn-info">正在學(xué)習(xí)</a>
</p>
</div>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img alt="100%x180" src="http://img1.sycdn.imooc.com//5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
</a>
<div class="caption">
<h3>Bootstrap框架系列教程</h3>
<p>Bootstrap框架是一個(gè)優(yōu)秀的前端框，就算您是一位后端程序員或者你是一位不懂設(shè)計(jì)的前端人員，你也能依賴于Bootstrap制作做優(yōu)美的網(wǎng)站...</p>
<p>
<a href="##" class="btn btn-primary">開(kāi)始學(xué)習(xí)</a>
<a href="##" class="btn btn-info">正在學(xué)習(xí)</a>
</p>
</div>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img alt="100%x180" src="http://img1.sycdn.imooc.com//5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
</a>
<div class="caption">
<h3>Bootstrap框架系列教程</h3>
<p>Bootstrap框架是一個(gè)優(yōu)秀的前端框，就算您是一位后端程序員或者你是一位不懂設(shè)計(jì)的前端人員，你也能依賴于Bootstrap制作做優(yōu)美的網(wǎng)站...</p>
<p>
<a href="##" class="btn btn-primary">開(kāi)始學(xué)習(xí)</a>
<a href="##" class="btn btn-info">正在學(xué)習(xí)</a>
</p>
</div>
</div>
</div>
</div>
<!--下面是代碼任務(wù)部分--->
<h2>下面是代碼任務(wù)部分</h2>
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://img1.sycdn.imooc.com//5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img alt="100%x180" src="http://img1.sycdn.imooc.com//5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img alt="100%x180" src="http://img1.sycdn.imooc.com//5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img alt="100%x180" src="http://img1.sycdn.imooc.com//5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
</a>
</div>
</div>
</div>
<script src="http://idcbgp.cn/static/lib/jquery/1.9.1/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
body {
padding: 20px;
}
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
