图像

创建拥有各种不同样式和尺寸的缩略图。

缩略图

示例

要使应用个组件,只需要添加 thumb 类到一个 <img>, <a><figure> 元素中。

代码

<img class="thumb" width="" height="" alt="" src="">
<a class="thumb" href="#"><img width="" height="" alt="" src=""></a>
<figure class="thumb"><img width="" height="" alt="" src=""></figure>

图片说明

添加 thumb-caption 类到一个 <div> 元素中,可以在图片下面添加一个图片说明。

示例

图片说明
图片说明
图片说明

代码

<div class="thumb">
    <img width="" height="" alt="" src="">
    <div class="thumb-caption">...</div>
</div>
<a class="thumb" href="#">
    <img width="" height="" alt="" src="">
    <div class="thumb-caption">...</div>
</a>
<figure class="thumb">
    <img width="" height="" alt="" src="">
    <figcaption class="thumb-caption">...</figcaption>
</figure>

缩略图大小

示例

大缩略图
中缩略图
小缩略图
扩展缩略图

代码

<div class="thumb thumb-lg">
    <img width="" height="" alt="" src="">
    <div class="thumb-caption">...</div>
</div>
<div class="thumb thumb-md">
    <img width="" height="" alt="" src="">
    <div class="thumb-caption">...</div>
</div>
<div class="thumb thumb-sm">
    <img width="" height="" alt="" src="">
    <div class="thumb-caption">...</div>
</div>

<div class="thumb thumb-expand">
    <img width="" height="" alt="" src="">
    <div class="thumb-caption">...</div>
</div>