Bootstrap 縮略圖

時間 2019-11-11

原文原文鏈接

本章將講解 Bootstrap 縮略圖。大多數站點都須要在網格中佈局圖像、視頻、文本等。Bootstrap 經過縮略圖爲此提供了一種簡便的方式。使用 Bootstrap 建立縮略圖的步驟以下：php

在圖像周圍添加帶有 class .thumbnail 的 <a> 標籤。css
這會添加四個像素的內邊距（padding）和一個灰色的邊框。html
當鼠標懸停在圖像上時，會動畫顯示出圖像的輪廓。jquery

下面的實例演示了默認的縮略圖：bootstrap

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 縮略圖</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="row">
   <div class="col-sm-6 col-md-3">
      <a href="#" class="thumbnail">
         <img src="/images/kittens.jpg" 
         alt="通用的佔位符縮略圖">
      </a>
   </div>
   <div class="col-sm-6 col-md-3">
      <a href="#" class="thumbnail">
         <img src="/images/kittens.jpg" 
         alt="通用的佔位符縮略圖">
      </a>
   </div>
   <div class="col-sm-6 col-md-3">
      <a href="#" class="thumbnail">
         <img src="/images/kittens.jpg" 
         alt="通用的佔位符縮略圖">
      </a>
   </div>
   <div class="col-sm-6 col-md-3">
      <a href="#" class="thumbnail">
         <img src="/images/kittens.jpg" 
         alt="通用的佔位符縮略圖">
      </a>
   </div>
</div>

</body>
</html>

嘗試一下 »佈局

結果以下所示：動畫

添加自定義的內容

如今咱們有了一個基本的縮略圖，咱們能夠向縮略圖添加各類 HTML 內容，好比標題、段落或按鈕。具體步驟以下：spa

把帶有 class .thumbnail 的 <a> 標籤改成 <div>。code
在該 <div> 內，您能夠添加任何您想要添加的東西。因爲這是一個 <div>，咱們能夠使用默認的基於 span 的命名規則來調整大小。orm
若是您想要給多個圖像進行分組，請把它們放置在一個無序列表中，且每一個列表項向左浮動。

下面的實例演示了這點：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 自定義縮略圖</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="row">
   <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
         <img src="/images/kittens.jpg" 
         alt="通用的佔位符縮略圖">
      </div>
      <div class="caption">
         <h3>縮略圖標籤</h3>
         <p>一些示例文本。一些示例文本。</p>
         <p>
            <a href="#" class="btn btn-primary" role="button">
               按鈕
            </a> 
            <a href="#" class="btn btn-default" role="button">
               按鈕
            </a>
         </p>
      </div>
   </div>
   <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
         <img src="/images/kittens.jpg" 
         alt="通用的佔位符縮略圖">
      </div>
      <div class="caption">
         <h3>縮略圖標籤</h3>
         <p>一些示例文本。一些示例文本。</p>
         <p>
            <a href="#" class="btn btn-primary" role="button">
               按鈕
            </a> 
            <a href="#" class="btn btn-default" role="button">
               按鈕
            </a>
         </p>
      </div>
   </div>
   <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
         <img src="/images/kittens.jpg" 
         alt="通用的佔位符縮略圖">
      </div>
      <div class="caption">
         <h3>縮略圖標籤</h3>
         <p>一些示例文本。一些示例文本。</p>
         <p>
            <a href="#" class="btn btn-primary" role="button">
               按鈕
            </a> 
            <a href="#" class="btn btn-default" role="button">
               按鈕
            </a>
         </p>
      </div>
   </div>
   <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
         <img src="/images/kittens.jpg" 
         alt="通用的佔位符縮略圖">
      </div>
      <div class="caption">
         <h3>縮略圖標籤</h3>
         <p>一些示例文本。一些示例文本。</p>
         <p>
            <a href="#" class="btn btn-primary" role="button">
               按鈕
            </a> 
            <a href="#" class="btn btn-default" role="button">
               按鈕
            </a>
         </p>
      </div>
   </div>
</div>

</body>
</html>

嘗試一下 »

結果以下所示：

原文地址：http://www.phplearn.cn/bootstrap/bootstrap-thumbnails.html

相關標籤/搜索

bootstrap+bootstrap+scss

Bootstarp

NoSQL教程

Redis教程

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。