imej asas


Yayasan menyediakan imej responsif yang boleh mencipta lakaran kenit dan pop timbul imej:

Lakaran kenit

ditambah di luar elemen <img> <a> > elemen menggunakan imej sebagai pautan sauh.

Tambah kelas <a> dalam teg .th untuk menetapkan imej sebagai lakaran kecil. Menggerakkan tetikus ke atasnya akan memaparkan bingkai biru muda:

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</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> 标签中添加 <code>.th</code> 类将图片设置为缩略图。 鼠标移动到上面会显示一个浅蓝色外框:</p>
  <p><strong>注意:</strong>  Foundation 中图片默认是响应式的。重置窗口大小可以查看效果。</p>       
  <a href="paris.jpg" target="_blank" class="th">
    <img src="paris.jpg" alt="Paris" width="400" height="300">
  </a>
</div>

</body>
</html>

Run Instance»

Click" Run butang instance" untuk melihat contoh dalam talian

Note
Note响应式图片

Foundation 中图片默认是响应式的。我们可以在实例页面重置浏览器大小来查看图片缩放效果。
Imej responsif

Imej dalam Yayasan adalah responsif secara lalai. Kami boleh menetapkan semula saiz penyemak imbas pada halaman contoh untuk melihat kesan penskalaan imej.

.thImej sudut bulat.radius

Kita boleh menambah kelas
ke kelas

untuk menetapkan sudut bulat lakaran kecil:

Instance
<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</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> 标签中添加 <code>.th</code> 类将图片设置为缩略图。 鼠标移动到上面会显示一个浅蓝色外框。</p>
  <p>我们可以在 .th 类添加 .radius 类来设置圆角缩略图：</p>       
  <a href="paris.jpg" target="_blank" class="th radius">
    <img src="paris.jpg" alt="Paris" width="400" height="300">
  </a>
</div>

</body>
</html>

Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian

Tetingkap timbul mudah

<ul>Yayasan boleh melaksanakan tetingkap timbul imej dengan mudah. .clearing-thumbsdata-clearingUntuk mencipta tetingkap timbul, tambahkan kelas <ul> dan atribut

pada elemen

. Tambah senarai imej dalam .

Nota:

Pop timbul imej memerlukan JavaScript. Oleh itu, anda perlu memulakan Foundation JS sebelum menggunakannya.

Instance
<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</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> <ul></code> 元素上添加 <code>.clearing-thumbs</code> 类及 <code>data-clearing</code> 属性。在 <code><ul></code> 内添加图片列表。</p>
   <p>在新窗口打开查看效果更好，打开新窗口 <a target="_blank" href="tryfoundation_lightbox.htm">点击这里</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>

Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian

data-captionPenerangan teks imej

Anda boleh menambah atribut

pada setiap imej untuk menetapkan perihalan imej

Instance
<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</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> 属性到每个图片来设置图片的描述。</p>
  
  <p>在新窗口打开查看效果更好，打开新窗口 <a target="_blank" href="tryfoundation_lightbox_caption.htm">点击这里</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>

Jalankan instance»
Note提示： 你可以在 data-caption 属性中添加 HTML 元素，如  data-caption="<h2>Pulpit Rock</h2><p>Located in Norway</p>"
Klik butang "Run instance" untuk melihat instance dalam talian<🎜><🎜>< th style="width:34px"> Nota< td><🎜>Petua:<🎜> Anda boleh menambah elemen HTML dalam atribut kapsyen data, seperti data-caption="<h2>Pulpit Rock</h2>< p>Terletak di Norway</p>"

Paparkan hanya satu lakaran kecil

Apabila anda perlu memaparkan hanya satu lakaran kecil, anda boleh menggunakan kelas <ul> dalam .clearing-feature dan menggunakan <🎜 dalam kelas <li> >. .clearing-featured-img

Instance

源代码:

<!DOCTYPE html>

<html>

<head>

  <title>Foundation 实例</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> <ul></code> 中使用 <code>.clearing-feature</code> 类并在<code><li></code> 中使用 <code>.clearing-featured-img</code> 类。</p>

  <p>在新窗口打开查看效果更好，打开新窗口 <a target="_blank" href="tryfoundation_lightbox_feature.htm">点击这里</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>

测试结果:
尝试一下 - © php.cn

Run instance »Klik butang "Run Instance" untuk melihat instance dalam talian

←
→