自强学堂
自强学堂:学习、分享、让你更强!
Bootstrap 教程HTMLCSSJAVASCRIPTJQUERYSQLPHPBOOTSTRAPANGULARXML
 

Bootstrap 缩略图

简介

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

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

为什么使用缩略图

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

使用默认缩略图实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example of using default thumbnails from ziqiangxuetang.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Example of using default thumbnails from ziqiangxuetang.com">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
	<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/example-fixed-layout.css" rel="stylesheet">
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/favicon.ico">
    <link rel="apple-touch-icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png">
  </head>

  <body>
    <div class="container">
      <ul class="thumbnails">
  <li class="span3">
    <a href="http://www.ziqiangxuetang.com/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.ziqiangxuetang.com/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.ziqiangxuetang.com/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 -->
</body>
</html>

在线查看实例

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

定制缩略图实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example of thumbnails customized from ziqiangxuetang.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Example of thumbnails customized from ziqiangxuetang.com">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
	<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/example-fixed-layout.css" rel="stylesheet">
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/favicon.ico">
    <link rel="apple-touch-icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png">
  </head>

<body>
<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 -->
</body>
</html>

在线查看实例

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

为什么有广告?:广告收入是作者继续投入更多业余时间的动力,也可以补贴服务器等的花费,本站也不会阻止屏蔽广告插件,请大家理解!