<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css"
rel="stylesheet">
<style type="text/css">
body{
margin-top: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3">
<!-- 缩略图样式 -->
<a href="#" class="thumbnail">
<img src="../../image/php-thumb.png">
</a>
</div>
<div class="col-lg-3">
<!-- 缩略图样式 -->
<a href="#" class="thumbnail">
<img src="../../image/mysql-thumb.png">
</a>
</div>
<div class="col-lg-3">
<!-- 缩略图样式 -->
<a href="#" class="thumbnail">
<img src="../../image/js-thumb.png">
</a>
</div>
</div>
</div>
<!-- /container -->
<script src="../../jquery/jquery-1.10.2.min.js"></script>
<script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css"
rel="stylesheet">
<style type="text/css">
body{
margin-top: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4">
<!-- 缩略图样式 -->
<div class="thumbnail">
<img src="../../image/shoes1.jpg">
<div class="caption">
<h5>Product detail</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a href="#" class="btn btn-success">Buy</a> <a href="#" class="btn btn-warning">Try</a></p>
</div>
</div>
</div>
<div class="col-lg-4">
<!-- 缩略图样式 -->
<div class="thumbnail">
<img src="../../image/shoes2.jpg">
<div class="caption">
<h5>Product detail</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a href="#" class="btn btn-success">Buy</a> <a href="#" class="btn btn-warning">Try</a></p>
</div>
</div>
</div>
</div>
</div>
<!-- /container -->
<script src="../../jquery/jquery-1.10.2.min.js"></script>
<script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>
相关推荐
4. **组件**：Bootstrap 提供了一系列可重用的UI组件，如导航条（Navbar）、下拉菜单（Dropdowns）、按钮组（Button Groups）、轮播（Carousel）、警告提示（Alerts）、模态框（Modals）、缩略图（Thumbnails）、...
在“Bootstrap 3 Tutorial 54 - Thumbnails”这个教程中，我们将深入探讨如何利用Bootstrap的缩略图（Thumbnails）组件来展示图片、内容或媒体以吸引用户注意力。缩略图在网站设计中扮演着重要角色，尤其是在产品...
Bootstrap的缩略图组件（Bootstrap Thumbnails）设计优雅，具有高度可定制性，适用于各种类型的项目。它们可以很容易地调整大小，适应不同的屏幕尺寸，从而提供一致的用户体验，无论用户是在桌面、平板还是移动设备...
下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。 Bootstrap自带了13个jQuery插件，这些插件为Bootstrap中的组件赋予了“生命”。其中包括： 模式...
3. **组件**：Bootstrap 3.3.7包含各种丰富的组件，如导航栏(navigation bars)、下拉菜单(drop-downs)、按钮(buttons)、表单(forms)、模态框(modals)、警告条(alerts)、轮播(carousels)、图像轮播(image galleries)...
`bootstrap-11-01-缩略图.mp4` 会讲解如何利用Bootstrap的缩略图（Thumbnails）组件来展示图像或内容预览。缩略图可以自定义尺寸，也可以与链接、标题和描述一起使用，提供丰富的内容展示方式。 `bootstrap-12-01-...
这里，`slider-big-image` 用于显示当前选中的大图，而 `slider-thumbnails` 包含所有缩略图。每个缩略图都有一个 `data-index` 属性，用于关联对应的主图。 然后，我们使用JavaScript来控制幻灯片的切换。可以为...
在Bootstrap中，缩略图（thumbnails）是一个常用的组件，用于展示图片预览或缩略版本，通常与其它内容如标题、描述和操作链接一起使用。在本文中，我们将深入探讨Bootstrap缩略图的基本用法和特性。 首先，缩略图的...
**缩略图（Thumbnails）**是Bootstrap中用于展示图片和相关描述的一种布局组件。它通常用于创建图像的网格系统，可以包含图像、标题、文本和其他内容。缩略图的基本结构包括`.thumbnail`类，可以包裹在`<div>`或`...
`col-xs-6 col-md-3`表示在超小屏幕（）上每行显示两个缩略图，在中等屏幕（≥992px）上每行显示三个。Bootstrap的网格系统将页面划分为12列，这里的设置确保了布局的响应式特性。 2、复杂缩略图 除了基本的缩略图...
这里，`<a>`标签的`href`属性指向大图，`<img>`标签则展示缩略图。 3. **初始化插件**： 在页面加载完成后，通过JavaScript初始化Blueimp Gallery： ```javascript $('#links').blueimpGallery(); ``` 这将使...
在本教程中，我们将深入探讨如何使用Bootstrap中的缩略图（Thumbnails）和警告框（Alerts）来增强网站的用户体验。 首先，让我们来看看Bootstrap的缩略图组件。缩略图通常用于展示图片、视频或其他媒体的预览。在...
缩略图轮播 简单的jquery插件，增加了对将bootsrap轮播使用缩略图的支持。 依赖关系：jQuery＆bootstrap.js，在其后包括thumbnails.carousel.js。 虽然用户向左或向右滑动，但选择适当的缩略图并更改其不透明度在...
9. **缩略图（Thumbnails）**：展示图片或内容的简版形式。 10. **警告（Alerts）**：用于显示通知或警告消息的组件。 11. **进度条（Progress Bars）**：显示进度或加载状态的条状图形。 12. ** Collapse（折叠）**...
除了按钮组和下拉菜单，Bootstrap 还包含许多其他UI组件，例如导航(Navigation)、标签(Labels)、徽章(Badges)、排版(Typography)、缩略图(Thumbnails)、提醒(Alerts)、进度条(Progress Bars)和杂项(Miscellaneous)等...
jQuery鼠标悬停缩略图横向切换大图展示特效是一种常见的网页交互效果，广泛应用于产品展示、图片画廊等场景。这种特效通过JavaScript库jQuery实现，它使得用户在鼠标悬停在缩略图上时，可以方便地预览与之对应的大图...
5. **组件**：如分页（pagination）、缩略图（thumbnails）、警告框（alerts）、进度条（progress bars）等，丰富了页面元素。 6. **插件**：包括模态框（modals）、标签页（tabs）、滚动条（scrollspy）、弹出框...