1. 引入 Bootstrap 样式表： 确保在你的 HTML 文件中引入 Bootstrap 的样式表。你可以在头部添加以下代码：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
这是 Bootstrap 5 的 CDN 地址，你可以根据需要选择不同版本。
2. 创建一个缩略图容器： 在你的 HTML 文件中创建一个容器，用于包裹缩略图。你可以使用 div 元素，并为其添加 class="thumbnail"：
<div class="thumbnail">
<!-- 缩略图内容将在这里添加 -->
</div>
3. 添加缩略图图像： 在上述容器中，添加你想要显示的图像。使用 img 元素，并添加 Bootstrap 提供的 img-thumbnail 类：
<div class="thumbnail">
<img src="路径/到/你的/图像.jpg" alt="图像描述" class="img-thumbnail">
</div>
将 "路径/到/你的/图像.jpg" 替换为你实际图像的路径。
4. 可选的添加标题和描述： 如果需要，你可以在缩略图容器中添加标题和描述。例如：
<div class="thumbnail">
<img src="路径/到/你的/图像.jpg" alt="图像描述" class="img-thumbnail">
<div class="caption">
<h3>缩略图标题</h3>
<p>这是缩略图的描述文本。</p>
</div>
</div>
你可以根据实际需求修改标题和描述文本。
以上是一个简单的 Bootstrap 缩略图的例子。确保你的项目中已正确引入 Bootstrap 样式表，以便使用这些样式。如果你使用的是本地安装的 Bootstrap，请相应调整样式表的路径。
转载请注明出处：http://www.zyzy.cn/article/detail/12622/Bootstrap