缩略图组件 图片排版 key:img thumbnail - Bootstrap 工具类

缩略图组件 图片排版

W3CSchool > bootstrap3中文手册 > Bootstrap 工具类 > 缩略图组件 图片排版

通过缩略图组件 .thumbnail 扩展 Bootstrap 的 栅格系统,可以很容易地展示栅格样式的图像、视频、文本等内容。

如果你想实现一个类似 Pinterest 的页面效果(不同高度和/宽度的缩略图顺序排列)的话,你需要使用一个第三方插件,比如 MasonryIsotopeSalvattore

默认样式的实例

Boostrap 缩略图的默认设计仅需最少的标签就能展示带链接的图片。

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

自定义内容

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

Generic placeholder thumbnail

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Generic placeholder thumbnail

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Generic placeholder thumbnail

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

 


中文演示:

Bootstrap 缩略图

本章将讲解 Bootstrap 缩略图。大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下:

  • 在图像周围添加带有 class .thumbnail 的 <a> 标签。
  • 这会添加四个像素的内边距(padding)和一个灰色的边框。
  • 当鼠标悬停在图像上时,会动画显示出图像的轮廓。

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

 

  1. <div class="row"
  2.     <div class="col-sm-6 col-md-3"
  3.         <a href="#" class="thumbnail"
  4.             <img src="/holder.js/100%x180" 
  5.                  alt="通用的占位符缩略图"
  6.         </a> 
  7.     </div> 
  8.     <div class="col-sm-6 col-md-3"
  9.         <a href="#" class="thumbnail"
  10.             <img src="/holder.js/100%x180" 
  11.                  alt="通用的占位符缩略图"
  12.         </a> 
  13.     </div> 
  14.     <div class="col-sm-6 col-md-3"
  15.         <a href="#" class="thumbnail"
  16.             <img src="/holder.js/100%x180" 
  17.                  alt="通用的占位符缩略图"
  18.         </a> 
  19.     </div> 
  20.     <div class="col-sm-6 col-md-3"
  21.         <a href="#" class="thumbnail"
  22.             <img src="/holder.js/100%x180" 
  23.                  alt="通用的占位符缩略图"
  24.         </a> 
  25.     </div> 
  26. </div> 

为图片列表添加常用组件元素

现在我们有了一个基本的缩略图,我们可以向缩略图添加各种 HTML 内容,比如标题、段落或按钮。具体步骤如下:

  • 把带有 class .thumbnail 的 <a> 标签改为 <div>。
  • 在该 <div> 内,您可以添加任何您想要添加的东西。由于这是一个 <div>,我们可以使用默认的基于 span 的命名规则来调整大小。
  • 如果您想要给多个图像进行分组,请把它们放置在一个无序列表中,且每个列表项向左浮动。

下面的实例演示了这点:

 

通用的占位符缩略图

缩略图标签

一些示例文本。一些示例文本。

按钮 按钮

通用的占位符缩略图

缩略图标签

一些示例文本。一些示例文本。

按钮 按钮

通用的占位符缩略图

缩略图标签

一些示例文本。一些示例文本。

按钮 按钮

通用的占位符缩略图

缩略图标签

一些示例文本。一些示例文本。

按钮 按钮

  1. <div class="row"
  2.     <div class="col-sm-6 col-md-3"
  3.          <div class="thumbnail"
  4.             <img src="/wp-content/uploads/2014/06/kittens.jpg"  
  5.              alt="通用的占位符缩略图"
  6.             <div class="caption"
  7.                 <h3>缩略图标签</h3> 
  8.                 <p>一些示例文本。一些示例文本。</p> 
  9.                 <p> 
  10.                     <a href="#" class="btn btn-primary" role="button"
  11.                         按钮 
  12.                     </a>  
  13.                     <a href="#" class="btn btn-default" role="button"
  14.                         按钮 
  15.                     </a> 
  16.                 </p> 
  17.             </div> 
  18.          </div> 
  19.     </div> 
  20.     <div class="col-sm-6 col-md-3"
  21.         <div class="thumbnail"
  22.             <img src="/wp-content/uploads/2014/06/kittens.jpg"  
  23.             alt="通用的占位符缩略图"
  24.             <div class="caption"
  25.                 <h3>缩略图标签</h3> 
  26.                 <p>一些示例文本。一些示例文本。</p> 
  27.                 <p> 
  28.                     <a href="#" class="btn btn-primary" role="button"
  29.                         按钮 
  30.                     </a>  
  31.                     <a href="#" class="btn btn-default" role="button"
  32.                         按钮 
  33.                     </a> 
  34.                 </p> 
  35.             </div> 
  36.         </div> 
  37.     </div> 
  38.     <div class="col-sm-6 col-md-3"
  39.         <div class="thumbnail"
  40.             <img src="/wp-content/uploads/2014/06/kittens.jpg"  
  41.             alt="通用的占位符缩略图"
  42.             <div class="caption"
  43.                 <h3>缩略图标签</h3> 
  44.                 <p>一些示例文本。一些示例文本。</p> 
  45.                 <p> 
  46.                     <a href="#" class="btn btn-primary" role="button"
  47.                         按钮 
  48.                     </a>  
  49.                     <a href="#" class="btn btn-default" role="button"
  50.                         按钮 
  51.                     </a> 
  52.                 </p> 
  53.             </div> 
  54.         </div> 
  55.     </div> 
  56.     <div class="col-sm-6 col-md-3"
  57.         <div class="thumbnail"
  58.             <img src="/wp-content/uploads/2014/06/kittens.jpg"  
  59.             alt="通用的占位符缩略图"
  60.             <div class="caption"
  61.                 <h3>缩略图标签</h3> 
  62.                 <p>一些示例文本。一些示例文本。</p> 
  63.                 <p> 
  64.                     <a href="#" class="btn btn-primary" role="button"
  65.                         按钮 
  66.                     </a>  
  67.                     <a href="#" class="btn btn-default" role="button"
  68.                         按钮 
  69.                     </a> 
  70.                 </p> 
  71.             </div> 
  72.         </div> 
  73.     </div> 
  74. </div> 

将例子中的图片地址更换为你的图片链接试试吧。

没有找到答案?搜索一下吧!

学习导航


Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)