本章将讲解 Bootstrap 缩略图。大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下:
下面的实例演示了默认的缩略图:
< div class = "row" > < div class = "col-sm-6 col-md-3" > < a href = "#" class = "thumbnail" > < img src = "/wp-content/uploads/2014/06/kittens.jpg" alt = "通用的占位符缩略图" > </ a > </ div > < div class = "col-sm-6 col-md-3" > < a href = "#" class = "thumbnail" > < img src = "/wp-content/uploads/2014/06/kittens.jpg" alt = "通用的占位符缩略图" > </ a > </ div > < div class = "col-sm-6 col-md-3" > < a href = "#" class = "thumbnail" > < img src = "/wp-content/uploads/2014/06/kittens.jpg" alt = "通用的占位符缩略图" > </ a > </ div > < div class = "col-sm-6 col-md-3" > < a href = "#" class = "thumbnail" > < img src = "/wp-content/uploads/2014/06/kittens.jpg" alt = "通用的占位符缩略图" > </ a > </ div > </ div > |
结果如下所示:
现在我们有了一个基本的缩略图,我们可以向缩略图添加各种 HTML 内容,比如标题、段落或按钮。具体步骤如下:
下面的实例演示了这点:
< div class = "row" > < div class = "col-sm-6 col-md-3" > < div class = "thumbnail" > < img src = "/wp-content/uploads/2014/06/kittens.jpg" alt = "通用的占位符缩略图" > < div class = "caption" > < h3 >缩略图标签</ h3 > < p >一些示例文本。一些示例文本。</ p > < p > < a href = "#" class = "btn btn-primary" role = "button" > 按钮 </ a > < a href = "#" class = "btn btn-default" role = "button" > 按钮 </ a > </ p > </ div > </ div > </ div > < div class = "col-sm-6 col-md-3" > < div class = "thumbnail" > < img src = "/wp-content/uploads/2014/06/kittens.jpg" alt = "通用的占位符缩略图" > < div class = "caption" > < h3 >缩略图标签</ h3 > < p >一些示例文本。一些示例文本。</ p > < p > < a href = "#" class = "btn btn-primary" role = "button" > 按钮 </ a > < a href = "#" class = "btn btn-default" role = "button" > 按钮 </ a > </ p > </ div > </ div > </ div > < div class = "col-sm-6 col-md-3" > < div class = "thumbnail" > < img src = "/wp-content/uploads/2014/06/kittens.jpg" alt = "通用的占位符缩略图" > < div class = "caption" > < h3 >缩略图标签</ h3 > < p >一些示例文本。一些示例文本。</ p > < p > < a href = "#" class = "btn btn-primary" role = "button" > 按钮 </ a > < a href = "#" class = "btn btn-default" role = "button" > 按钮 </ a > </ p > </ div > </ div > </ div > < div class = "col-sm-6 col-md-3" > < div class = "thumbnail" > < img src = "/wp-content/uploads/2014/06/kittens.jpg" alt = "通用的占位符缩略图" > < div class = "caption" > < h3 >缩略图标签</ h3 > < p >一些示例文本。一些示例文本。</ p > < p > < a href = "#" class = "btn btn-primary" role = "button" > 按钮 </ a > < a href = "#" class = "btn btn-default" role = "button" > 按钮 </ a > </ p > </ div > </ div > </ div > </ div > |
结果如下所示: