当前位置:首页 > BootStrap > 正文内容
五月27日

时间:2016-05-27 18:50

Bootstrap教程 缩略图

0
分类:BootStrap | 评论:0人 | 浏览:89次   

大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式,通过缩略图组件扩展 Bootstrap 的 栅格系统,可以很容易地展示栅格样式的图像、视频、文本等内容。如果你想实现一个类似 Pinterest 的页面效果(不同高度和/宽度的缩略图顺序排列)的话,你需要使用一个第三方插件,比如 Masonry、Isotope 或 Salvattore。
默认样式的实例

Boostrap 缩略图的默认设计仅需最少的标签就能展示带链接的图片。
使用 Bootstrap 创建缩略图的步骤如下:

◆ 在图像周围添加带有 class .thumbnail 的<a>标签。

◆ 这会添加四个像素的内边距(padding)和一个灰色的边框。

◆ 当鼠标悬停在图像上时,会动画显示出图像的轮廓。

下面的实例演示了默认的缩略图:

  1.   <div class="row">
  2.   <div class="col-xs-6 col-md-3">
  3.     <a href="#" class="thumbnail">
  4.       <img src="..." alt="...">
  5.     </a>
  6.   </div>
  7.   ...
  8. </div>
添加自定义的内容

添加一点点额外的标签,就可以把任何类型的 HTML 内容,例如标题、段落或按钮,加入缩略图组件内。

  1. <div class="row">
  2.   <div class="col-sm-6 col-md-4">
  3.     <div class="thumbnail">
  4.       <img src="..." alt="...">
  5.       <div class="caption">
  6.         <h3>Thumbnail label</h3>
  7.         <p>一些示例文本</p>
  8.         <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
  9.       </div>
  10.     </div>
  11.   </div>
  12. </div>

来源:Dashu.info(微信号/QQ号:43318553),转载请注明出处,谢谢!

  • 评论:(0)
  • 有图有真相

站内搜索

css.php

无觅相关文章插件,快速提升流量