免费AI编程助手
Bootstrap 缩略图
2018-03-22 09:33 更新
Bootstrap的缩略图（Thumbnails）组件用于显示图片和视频缩略图。
它通过应用在其周围形成框的边框来显示具有可点击吸引力的图片和视频。 它还带有一个整洁的悬停效果，突出了聚焦的缩略图，通过将其边框颜色更改为蓝色。
以下是创建缩略图的标记：
例子1
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body style="margin:30px">
<a href="#" class="thumbnail">
<img src="http://placehold.it/200x200">
</a>
</body>
</html>例子2
让我们使用Bootstrap的网格系统创建一个四列设计。我们将在每个列中放置一个图像，然后对每个列应用缩略图标记。
我们将使用类 col-xs-3创建一个四列设计：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body style="margin:30px">
<div class="row">
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/200x200">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/200x200">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/200x200">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/200x200">
</a>
</div>
</div>
</body>
</html>例子3
我们给每个缩略图一个标题，只需要在<img>标签正下方添加一个带有caption类的额外div。带有标题的缩略图的代码段应为：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body style="margin:30px">
<a href="#" class="thumbnail">
<img src="http://placehold.it/200x200">
<div class="caption">
<h3>Caption Goes Here!</h3>
</div>
</a>
</body>
</html>例子4
你还可以为每个缩略图添加一些摘录，以及一个“阅读更多”按钮，用于链接到网站中的不同网页。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body style="margin:30px">
<div class="thumbnail">
<img src="http://placehold.it/200x200"/>
<div class="caption">
<h3>Microsoft</h3>
<p>Lorem ipsum dolor sit amet, consectetur ...</p>
<p><a href="#" class="btn btn-primary">Read More</a></p>
</div>
</div>
</body>
</html>以上内容是否对您有帮助：
更多建议：