Bootstrap 縮略圖

簡介

在本教程中,您將看到如何使用 Bootstrap 創建縮略圖,即圖像、錄像、文本的網格。

縮略圖有一個簡單而又靈活的標記。同時,您可以使用已有的 bootstrap css class 比如 .span2 或 .span3 來設置縮略圖的寬度和高度。

為什麼使用縮略圖

當在 Web 中創建用戶經曆,您通常需要創建一個圖像或錄像的網格。一個很好的例子就是需要展示產品圖片的公司網站,這個時候,可能會用到縮略圖。

使用默認縮略圖實例

實例

<div class="container">
    <ul class="thumbnails">
        <li class="span3">
            <a href="/php/php-tutorial.html" class="thumbnail">
                <img decoding="async" src="../bootstrap/php-thumb.png" alt="php tutorial" width="260" height="180" />
            </a>
        </li>
        <li class="span4">
            <a href="/sql/sql-tutorial.html" class="thumbnail">
                <img decoding="async" loading="lazy" src="../bootstrap/mysql-thumb.png" alt="mysql tutorial" width="300" height="180" />
            </a>
        </li>
        <li class="span5">
            <a href="/js/js-tutorial.html" class="thumbnail">
                <img decoding="async" loading="lazy" 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 decoding="async" 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 decoding="async" 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 和圖片文件。