缩略图（二），玩转Bootstrap（基础）教程-慕课网

解锁即可观看《前端工程师》完整课程视频

立即解锁

前端工程师

前端入门如同写字，如果你不知道从哪开始，那就选择前端（含Vue3.x，React17,TS）

【第1周】HTML5基础语法与标签

【第2周】CSS3基础语法与盒模型

【第3周】CSS3浮动定位与背景样式

【第4周】CSS3动画与穷游首页开发实战

【第5周】JS基础语法与表达式

【第6周】JS流程控制语句与数组

【第7周】JS函数与DOM

【第8周】面向对象

【第9周】项目实战：仿穷游JS特效开发

【第10周】ES6基础入门

【第11周】ES6语法扩展

【第12周】ES6之Promise与Class类

【第13周】ES6之Module模块与Babel编译

【第14-15周】HTTP 协议、存储、Ajax

【第16周】项目实战：仿穷游组件化开发

【第17周】移动基础

【第18周】移动进阶之高效开发

【第19周】项目实战：仿穷游移动webapp开发

【第20周】小程序基础与慕课小程序实战

【第21-22周】Sass基础与Vue.js基础语法

【第23周】项目实战：Vue.js仿京东到家电商全栈项目前端开发（上）

【第24-25周】项目实战：Vue.js仿京东到家电商全栈项目前端（下）

【第26周】全栈必备基础Node.js

【第27周】koa2中间件与MongoDB数据库

【第28-29周】项目实战：node.js仿京东到家电商全栈项目后端开发

【第30周】TypeScript与React.js基础语法

【第31-32周】React旅游网开发与工程化

【第33周】就业必备基础技术面试分析

【第34周】就业必备框架与全栈技术面试分析

缩略图（二）

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

在仅有缩略图的基础上，添加了一个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.html
style.css

<!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>复杂的缩略图</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框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p> <p> <a href="##" class="btn btn-primary">开始学习</a> <a href="##" class="btn btn-info">正在学习</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框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p> <p> <a href="##" class="btn btn-primary">开始学习</a> <a href="##" class="btn btn-info">正在学习</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框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p> <p> <a href="##" class="btn btn-primary">开始学习</a> <a href="##" class="btn btn-info">正在学习</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框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p> <p> <a href="##" class="btn btn-primary">开始学习</a> <a href="##" class="btn btn-info">正在学习</a> </p> </div> </div> </div> </div>  <h2>下面是代码任务部分</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="https://www.imooc.com/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; }

提问题

提交

其他问答

查看更多本节问答

写笔记

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

7-2 缩略图（二）

缩略图（二）

任务

提问题

其他问答

写笔记

您还未绑定服务号

收藏课程后，能更快找到我哦～

手记推荐

7-2 缩略图（二）

热搜

最近搜索清空

缩略图（二）

任务

提问题

其他问答

写笔记

您还未绑定服务号

收藏课程后，能更快找到我哦～

手记推荐