Bootstrap 縮略圖

2018-03-22 09:33 更新

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

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

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

例子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的網格系統(tǒng)創(chuàng)建一個四列設計。我們將在每個列中放置一個圖像，然后對每個列應用縮略圖標記。

我們將使用類 col-xs-3創(chuà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="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

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

<!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

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

<!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>
以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號