Bootstrap - 缩略图

Bootstrap Thumbnails - 从概述，环境设置，基本结构，全局样式，网格系统，流体网格系统，布局，响应式设计，排版，表单，按钮，图像，图标，下拉列表，按钮组开始，简单易学地学习Bootstrap ，导航元素，导航栏，面包屑，分页，标签，徽章，版式，缩略图，警报，进度栏，媒体对象，Javascript插件像过渡，模态，下拉列表，Scrollspy，选项卡，工具提示，弹出，警报，按钮，折叠，旋转木马，Typeahead，Affix，Glyphicons，Jumbotron，Demos。

本章讨论Bootstrap缩略图.很多网站都需要一种在网格中布局图像，视频，文本等的方法，Bootstrap可以通过缩略图轻松实现.使用Bootstrap : 创建缩略图;

添加< a>标记为图像周围的 .thumbnail 类.
这会添加四个填充像素和一个灰色边框.
悬停时，动画光晕会勾勒出图像.

以下示例演示了默认缩略图 :

Thumbnail Demo

添加自定义内容

现在我们有了一个基本的缩略图，可以将任何类型的HTML内容(如标题，段落或按钮)添加到缩略图中.请按照以下步骤 : 去;

更改< a>标记 .thumbnail 到< div>.
在< div>内，你可以添加你需要的任何东西由于这是< div>，我们可以使用默认的基于span的命名约定来调整大小.
如果要对多个图像进行分组，请将它们放置在无序列表中，每个列表项将浮动到左侧.

以下示例演示了这个 :

                                                Thumbnail label
         Some sample text. Some sample text.
                                             Button                                                    Button                     
                                                                  Thumbnail label
         Some sample text. Some sample text.
                                             Button                                                    Button                     
                                                                  Thumbnail label
         Some sample text. Some sample text.
                                             Button                                                    Button                     
                                                                  Thumbnail label
         Some sample text. Some sample text.
                                             Button                                                    Button

自定义缩略图演示