首页 参考手册 笔记

Bootstrap V2 教程
Bootstrap 简介 Bootstrap 3 CSS 概览 Bootstrap 网格系统 Bootstrap 布局 Bootstrap 响应式设计 Bootstrap 排版 Bootstrap Glyphicons Bootstrap 表格 Bootstrap 表单 Bootstrap 按钮 Bootstrap 图像 Bootstrap 图标 Bootstrap 导航 Bootstrap 导航条 Bootstrap 内联标签和徽章 Bootstrap 缩略图 Bootstrap 进度条 Bootstrap 面包屑导航 Bootstrap 分页 Bootstrap 警告和错误 Bootstrap 清单组/价格表 Bootstrap LESS Bootstrap 模态框 Bootstrap 弹出框 Bootstrap 下拉菜单 Bootstrap 滚动监听 Bootstrap 轮播 Bootstrap Typeahead Bootstrap 按钮 Bootstrap 折叠

Bootstrap 教程

Bootstrap 教程 Bootstrap 简介 Bootstrap 环境安装 Bootstrap 可视化布局 Less 教程 Bootstrap CSS 概览 Bootstrap 网格系统 Bootstrap 排版 Bootstrap 代码 Bootstrap 表格 Bootstrap 表单 Bootstrap 按钮 Bootstrap 图片 Bootstrap 辅助类 Bootstrap 响应式实用工具 Bootstrap 字体图标 Bootstrap 下拉菜单 Bootstrap 按钮组 Bootstrap 按钮下拉菜单 Bootstrap 输入框组 Bootstrap 导航元素 Bootstrap 导航栏 Bootstrap 面包屑导航 Bootstrap 分页 Bootstrap 标签 Bootstrap 徽章 Bootstrap 超大屏幕 Bootstrap 页面标题 Bootstrap 缩略图 Bootstrap 警告 Bootstrap 进度条 Bootstrap 多媒体对象 Bootstrap 列表组 Bootstrap 面板 Bootstrap Well Bootstrap 插件概览 Bootstrap 过渡效果 Bootstrap 模态框 Bootstrap 下拉菜单 Bootstrap 滚动监听 Bootstrap 标签页 Bootstrap 提示工具 Bootstrap 弹出框 Bootstrap 警告框 Bootstrap 按钮 Bootstrap 折叠 Bootstrap 轮播 Bootstrap 附加导航 Bootstrap UI 编辑器 Bootstrap v2 教程 Bootstrap HTML编码规范 Bootstrap CSS编码规范
提示：你当前查看的是 Bootstrap 2.x 版本，Bootstrap3.x 版本点我。

Bootstrap 缩略图

简介

在本教程中，您将看到如何使用 Bootstrap 创建缩略图，即图像、录像、文本的网格。

缩略图有一个简单而又灵活的标记。同时，您可以使用已有的 bootstrap css class 比如 .span2 或 .span3 来设置缩略图的宽度和高度。

为什么使用缩略图

当在 Web 中创建用户经历，您通常需要创建一个图像或录像的网格。一个很好的例子就是需要展示产品图片的公司网站，这个时候，可能会用到缩略图。

使用默认缩略图实例

实例

<div class="container">
    <ul class="thumbnails">
        <li class="span3">
            <a href="http://www./php/php-tutorial.html" class="thumbnail">
                <img src="../bootstrap/php-thumb.png" alt="php tutorial" width="260" height="180" />
            </a>
        </li>
        <li class="span4">
            <a href="http://www./sql/sql-tutorial.html" class="thumbnail">
                <img src="../bootstrap/mysql-thumb.png" alt="mysql tutorial" width="300" height="180" />
            </a>
        </li>
        <li class="span5">
            <a href="http://www./js/js-tutorial.html" class="thumbnail">
                <img src="../bootstrap/js-thumb.png" alt="js tutorial" width="380" height="180" >
            </a>
        </li>
    </ul>
    <hr>
</div> <!-- /container -->
在线查看实例

您可以定制默认的缩略图，并添加段落、标题列表或者其他类型的 HTML 内容。

定制缩略图实例

实例

<div class="container">
    <ul class="thumbnails">
        <li class="span5">
            <div class="thumbnail">
                <img src="../bootstrap/shoes1.jpg" alt="product 1">
                <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>
        </li>
        <li class="span5">
            <div class="thumbnail">
                <img src="../bootstrap/shoes2.jpg" alt="product 2">
                <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>
        </li>
    </ul>
 
    <hr>
 
    <footer>
        <p>&copy; Company 2013</p>
    </footer>
 
</div> <!-- /container -->
在线查看实例

点击这里，下载本教程中使用到的所有 HTML、CSS、JS 和图片文件。