亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Foundation 中文手冊(cè) / Foundation 圖片

Foundation 圖片

Foundation 提供了響應(yīng)式的圖片，可以創(chuàng)建縮略圖喝圖片彈窗：
   

縮略圖

在 <img> 元素外添加 <a> 元素將圖片作為一個(gè)錨鏈接。

在 <a> 標(biāo)簽中添加 .th 類將圖片設(shè)置為縮略圖。 鼠標(biāo)移動(dòng)到上面會(huì)顯示一個(gè)淺藍(lán)色外框:

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px">
  <h2>縮略圖</h2>
  <p>在 <code><a></code> 標(biāo)簽中添加 <code>.th</code> 類將圖片設(shè)置為縮略圖。 鼠標(biāo)移動(dòng)到上面會(huì)顯示一個(gè)淺藍(lán)色外框:</p>
  <p><strong>注意:</strong>  Foundation 中圖片默認(rèn)是響應(yīng)式的。重置窗口大小可以查看效果。</p>       
  <a href="paris.jpg" target="_blank" class="th">
    <img src="paris.jpg" alt="Paris" width="400" height="300">
  </a>
</div>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

Note響應(yīng)式圖片

Foundation 中圖片默認(rèn)是響應(yīng)式的。我們可以在實(shí)例頁(yè)面重置瀏覽器大小來(lái)查看圖片縮放效果。

圓角圖片

我們可以在 .th 類添加 .radius  類來(lái)設(shè)置圓角縮略圖：

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px">
  <h2>Thumbnail</h2>
   <p>在 <code><a></code> 標(biāo)簽中添加 <code>.th</code> 類將圖片設(shè)置為縮略圖。 鼠標(biāo)移動(dòng)到上面會(huì)顯示一個(gè)淺藍(lán)色外框。</p>
  <p>我們可以在 .th 類添加 .radius 類來(lái)設(shè)置圓角縮略圖：</p>       
  <a href="paris.jpg" target="_blank" class="th radius">
    <img src="paris.jpg" alt="Paris" width="400" height="300">
  </a>
</div>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

簡(jiǎn)潔的彈窗

Foundation 可以很容易實(shí)現(xiàn)圖片彈窗。

要?jiǎng)?chuàng)建一個(gè)彈窗可以在 <ul> 元素上添加 .clearing-thumbs 類及 data-clearing 屬性。在 <ul> 內(nèi)添加圖片列表。

注意: 圖片彈窗需要 JavaScript。所以使用它前需要初始化 Foundation JS。

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
  
<div style="padding:20px">
  <h2>簡(jiǎn)潔的彈窗</h2>
  <p>要?jiǎng)?chuàng)建一個(gè)彈窗可以在 <code> <ul></code> 元素上添加 <code>.clearing-thumbs</code> 類及 <code>data-clearing</code> 屬性。在 <code><ul></code> 內(nèi)添加圖片列表。</p>
   <p>在新窗口打開(kāi)查看效果更好，打開(kāi)新窗口 <a target="_blank" href="tryfoundation_lightbox.htm">點(diǎn)擊這里</a>。</p>
  <ul class="clearing-thumbs" data-clearing>
    <li><a href="rock600x400.jpg"><img src="rock200x100.jpg" width="200" height="100"></a></li>
    <li><a href="skies600x400.jpg"><img src="skies200x100.jpg" width="200" height="100"></a></li>
    <li><a href="lights600x400.jpg"><img src="lights200x100.jpg" width="200" height="100"></a></li>
  </ul>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

圖片文本描述

可以添加 data-caption 屬性到每個(gè)圖片來(lái)設(shè)置圖片的描述

實(shí)例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
  
<div style="padding:20px">
  <h2>Lightbox Captions</h2>
  <p>可以添加 <code>data-caption</code> 屬性到每個(gè)圖片來(lái)設(shè)置圖片的描述。</p>
  
  <p>在新窗口打開(kāi)查看效果更好，打開(kāi)新窗口 <a target="_blank" href="tryfoundation_lightbox_caption.htm">點(diǎn)擊這里</a>。</p>
  <ul class="clearing-thumbs" data-clearing>
    <li><a href="rock600x400.jpg" class="th"><img data-caption="The Pulpit Rock" src="rock200x100.jpg" width="200" height="100"></a></li>
    <li><a href="skies600x400.jpg" class="th"><img data-caption="Sunrise Skies" src="skies200x100.jpg" width="200" height="100"></a></li>
    <li><a href="lights600x400.jpg" class="th"><img data-caption="Northern Lights" src="lights200x100.jpg" width="200" height="100"></a></li>
  </ul>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

Note提示： 你可以在 data-caption 屬性中添加 HTML 元素，如  data-caption="<h2>Pulpit Rock</h2><p>Located in Norway</p>"

只顯示一張縮略圖

當(dāng)你需要實(shí)現(xiàn)只顯示一張縮略圖時(shí)你可以在 <ul> 中使用 .clearing-feature 類并在<li> 中使用 .clearing-featured-img 類。

實(shí)例

源代碼:

<!DOCTYPE html>

<html>

<head>

  <title>Foundation 實(shí)例</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">

  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>

  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>

  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>

</head>

<body>

  

<div style="padding:20px">

  <h2>彈窗特點(diǎn)</h2>

  <p>當(dāng)你需要實(shí)現(xiàn)只顯示一張縮略圖時(shí)你可以在 <code> <ul></code> 中使用 <code>.clearing-feature</code> 類并在<code><li></code> 中使用 <code>.clearing-featured-img</code> 類。</p>

  <p>在新窗口打開(kāi)查看效果更好，打開(kāi)新窗口 <a target="_blank" href="tryfoundation_lightbox_feature.htm">點(diǎn)擊這里</a>。</p>

  <ul class="clearing-thumbs clearing-feature" data-clearing>

    <li><a href="rock600x400.jpg" class="th"><img data-caption="The Pulpit Rock" src="rock200x100.jpg" width="200" height="100"></a></li>

    <li><a href="skies600x400.jpg" class="th"><img data-caption="Sunrise Skies" src="skies200x100.jpg" width="200" height="100"></a></li>

    <li class="clearing-featured-img"><a href="lights600x400.jpg" class="th"><img data-caption="Northern Lights" src="lights200x100.jpg" width="200" height="100"></a></li>

  </ul>

</div>



<!-- 初始化 Foundation JS -->

<script>

$(document).ready(function() {

    $(document).foundation();

})

</script>


</body>

</html>

測(cè)試結(jié)果:
嘗試一下 - ? php.cn

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例