Bootstrap基本组件学习笔记之缩略图(13)

 更新时间:2016年12月08日 09:32:12   转载 作者:kikay  
这篇文章主要为大家详细介绍了Bootstrap基本组件学习笔记之缩略图,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

Bootstrap 通过缩略图为网站布局提供了一种简洁的解决方案。

直接看例子:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>缩略图</title>
</head>
<body>
<div class="container">
 <div class="page-header">
 <h1>缩略图</h1>
 </div>
 <div class="col-xs-2">
 <div class="thumbnail">
  <img src="../../img/girl.jpg">
  <div class="caption">
  <p>我是女生我是女生我是女生我是女生我是女生我是女生我是女生我是女生我是女生我是女生</p>
  <p><a href="#" class="btn btn-primary">查看详情</a></p>
  </div>
 </div>
 </div>
 <div class="col-xs-2">
 <div class="thumbnail">
  <img src="../../img/girl.jpg">
  <div class="caption">
  <p>我是女生我是女生我是女生我是女生我是女生我是女生我是女生我是女生我是女生我是女生</p>
  <p><a href="#" class="btn btn-primary">查看详情</a></p>
  </div>
 </div>
 </div>
 <div class="col-xs-2">
 <div class="thumbnail">
  <img src="../../img/girl.jpg">
  <div class="caption">
  <p>我是女生我是女生我是女生我是女生我是女生我是女生我是女生我是女生我是女生我是女生</p>
  <p><a href="#" class="btn btn-primary">查看详情</a></p>
  </div>
 </div>
 </div>
</div>
</body>
</html>

效果如下:

从上面例子可以看出,实现缩略图需要添加.thumbnail样式类,这样会在图片四周添加padding的边框,同时当鼠标悬停在图片上时,会动态显示出轮廓。

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 微信小程序使用第三方库Underscore.js步骤详解

    微信小程序使用第三方库Underscore.js步骤详解

    大家都知道Underscore.js是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象。那么这篇文章我们就来学习下微信小程序如何使用第三方库Underscore.js,有需要的可以参考学习。
    2016-09-09
  • js实现短信发送倒计时功能(正则验证)

    js实现短信发送倒计时功能(正则验证)

    这篇文章主要为大家详细介绍了js实现短信发送倒计时功能,包含正则验证,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • JS实现的全排列组合算法示例

    JS实现的全排列组合算法示例

    这篇文章主要介绍了JS实现的全排列组合算法,简单描述了全排列组合算法的原理并结合实例形式给出了全排列组合算法的具体实现技巧,需要的朋友可以参考下
    2017-10-10
  • javascript实现移动端 HTML5 图片上传预览和压缩功能示例

    javascript实现移动端 HTML5 图片上传预览和压缩功能示例

    这篇文章主要介绍了javascript实现移动端 HTML5 图片上传预览和压缩功能,结合实例形式分析了javascript移动端 HTML5 图片上传预览和压缩功能具体实现方法与操作注意事项,需要的朋友可以参考下
    2020-05-05
  • js简单实现表单中点击按钮动态增加输入框数量的方法

    js简单实现表单中点击按钮动态增加输入框数量的方法

    这篇文章主要介绍了js简单实现表单中点击按钮动态增加输入框数量的方法,涉及javascript鼠标点击事件及insertAdjacentHTML方法的相关使用技巧,需要的朋友可以参考下
    2015-08-08
  • canvas基础绘制-绚丽倒计时的实例

    canvas基础绘制-绚丽倒计时的实例

    下面小编就为大家带来一篇canvas基础绘制-绚丽倒计时的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 实现ssr服务端渲染的方法步骤

    实现ssr服务端渲染的方法步骤

    这篇文章主要介绍了实现ssr服务端渲染的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • 解决layui 三级联动下拉框更新时回显的问题

    解决layui 三级联动下拉框更新时回显的问题

    今天小编就为大家分享一篇解决layui 三级联动下拉框更新时回显的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】

    JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后

    这篇文章主要介绍了JavaScript数据结构与算法之二叉树遍历算法,结合实例形式详细分析了javascript二叉树的定义及先序遍历、中序遍历、后序遍历等相关遍历操作实现技巧,需要的朋友可以参考下
    2019-02-02
  • 基于JavaScript实现表格隔行换色

    基于JavaScript实现表格隔行换色

    这篇文章主要介绍了基于JavaScript实现表格隔行换色,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05

最新评论