Bootstrap 縮略圖

2018-03-22 09:33 更新

Bootstrap的縮略圖（Thumbnails）組件用于顯示圖片和視頻縮略圖。

它通過應(yīng)用在其周圍形成框的邊框來顯示具有可點(diǎn)擊吸引力的圖片和視頻。 它還帶有一個(gè)整潔的懸停效果，突出了聚焦的縮略圖，通過將其邊框顏色更改為藍(lán)色。

以下是創(chuàng)建縮略圖的標(biāo)記：

例子1

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body style="margin:30px">
        <a href="#" class="thumbnail">
            <img src="http://placehold.it/200x200">
        </a>

  </body>
</html>

例子2

讓我們使用Bootstrap的網(wǎng)格系統(tǒng)創(chuàng)建一個(gè)四列設(shè)計(jì)。我們將在每個(gè)列中放置一個(gè)圖像，然后對(duì)每個(gè)列應(yīng)用縮略圖標(biāo)記。

我們將使用類 col-xs-3創(chuàng)建一個(gè)四列設(shè)計(jì)：

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body style="margin:30px">
        <div class="row">
            <div class="col-xs-3">
                <a href="#" class="thumbnail">
                    <img src="http://placehold.it/200x200">
                </a>
            </div>
            <div class="col-xs-3">
                <a href="#" class="thumbnail">
                    <img src="http://placehold.it/200x200">
                </a>
            </div>
            <div class="col-xs-3">
                <a href="#" class="thumbnail">
                    <img src="http://placehold.it/200x200">
                </a>
            </div>
            <div class="col-xs-3">
                <a href="#" class="thumbnail">
                    <img src="http://placehold.it/200x200">
                </a>
            </div>
        </div>

  </body>
</html>

例子3

我們給每個(gè)縮略圖一個(gè)標(biāo)題，只需要在<img>標(biāo)簽正下方添加一個(gè)帶有caption類的額外div。帶有標(biāo)題的縮略圖的代碼段應(yīng)為：

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body style="margin:30px">
        <a href="#" class="thumbnail">
            <img src="http://placehold.it/200x200">
                <div class="caption">
                    <h3>Caption Goes Here!</h3>
                </div>
        </a>

  </body>
</html>

例子4

你還可以為每個(gè)縮略圖添加一些摘錄，以及一個(gè)“閱讀更多”按鈕，用于鏈接到網(wǎng)站中的不同網(wǎng)頁。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body style="margin:30px">
    <div class="thumbnail">
        <img src="http://placehold.it/200x200"/>
        <div class="caption">
            <h3>Microsoft</h3>
            <p>Lorem ipsum  dolor  sit amet,  consectetur ...</p>
            <p><a  href="#" class="btn btn-primary">Read More</a></p>
        </div>
    </div>

  </body>
</html>
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)