建站
咨詢
售后
建站咨詢
新聞中心
Foundation 圖片
Foundation 提供了響應(yīng)式的圖片，可以創(chuàng)建縮略圖和圖片彈窗：
嘗試一下 ?
縮略圖
在 標(biāo)簽中添加 .th 類將圖片設(shè)置為縮略圖。 鼠標(biāo)移動(dòng)到上面會(huì)顯示一個(gè)淺藍(lán)色外框:
實(shí)例
<
a
href=
"paris.jpg"
class=
"th"
>
<
img
src=
"paris.jpg"
alt=
"Paris"
>
<
/a
>
嘗試一下 ?
| 響應(yīng)式圖片 Foundation 中圖片默認(rèn)是響應(yīng)式的。我們可以在實(shí)例頁面重置瀏覽器大小來查看圖片縮放效果。 |
圓角圖片
我們可以在 .th 類添加 .radius 類來設(shè)置圓角縮略圖：
實(shí)例
<
a
href=
"paris.jpg"
class=
"th radius"
>
<
img
src=
"paris.jpg"
alt=
"Paris"
>
<
/a
>
嘗試一下 ?
簡(jiǎn)潔的彈窗
Foundation 可以很容易實(shí)現(xiàn)圖片彈窗。
要?jiǎng)?chuàng)建一個(gè)彈窗可以在 元素上添加 .clearing-thumbs 類及 data-clearing 屬性。在
注意: 圖片彈窗需要 JavaScript。所以使用它前需要初始化 Foundation JS。
實(shí)例
<
ul
class=
"clearing-thumbs"
data-clearing
>
<
li
>
<
a
href=
"rock600x400.jpg"
class=
"th"
>
<
img
src=
"rock200x100.jpg"
>
<
/a
>
<
/li
>
<
li
>
<
a
href=
"skies600x400.jpg"
class=
"th"
>
<
img
src=
"skies200x100.jpg"
>
<
/a
>
<
/li
>
<
li
>
<
a
href=
"lights600x400.jpg"
class=
"th"
>
<
img
src=
"lights200x100.jpg"
>
<
/a
>
<
/li
>
<
/ul
>
<
script
>
$(document).ready(function() {
$(document).foundation();
})
<
/script
>
嘗試一下 ?
圖片文本描述
可以添加 data-caption 屬性到每個(gè)圖片來設(shè)置圖片的描述:
實(shí)例
<
ul
class=
"clearing-thumbs"
data-clearing
>
<
li
>
<
a
href=
"rock600x400.jpg"
class=
"th"
>
<
img
data-caption=
"The Pulpit Rock"
src=
"rock200x100.jpg"
>
<
/a
>
<
/li
>
<
li
>
<
a
href=
"skies600x400.jpg"
class=
"th"
>
<
img
data-caption=
"Sunrise Skies"
src=
"skies200x100.jpg"
>
<
/a
>
<
/li
>
<
li
>
<
a
href=
"lights600x400.jpg"
class=
"th"
>
<
img
data-caption=
"Northern Lights"
src=
"lights200x100.jpg"
>
<
/a
>
<
/li
>
<
/ul
>
嘗試一下 ?
提示： 你可以在 data-caption 屬性中添加 HTML 元素，如 data-caption="Pulpit RockLocated in Norway " |
只顯示一張縮略圖
當(dāng)你需要實(shí)現(xiàn)只顯示一張縮略圖時(shí)你可以在 中使用 .clearing-feature 類并在 中使用 .clearing-featured-img 類。
實(shí)例
<
ul
class=
"clearing-thumbs clearing-feature"
data-clearing
>
<
li
>
<
a
href=
"rock600x400.jpg"
class=
"th"
>
<
img
data-caption=
"The Pulpit Rock"
src=
"rock200x100.jpg"
>
<
/a
>
<
/li
>
<
li
>
<
a
href=
"skies600x400.jpg"
class=
"th"
>
<
img
data-caption=
"Sunrise Skies"
src=
"skies200x100.jpg"
>
<
/a
>
<
/li
>
<
li
class=
"clearing-featured-img"
>
<
a
href=
"lights600x400.jpg"
class=
"th"
>
<
img
data-caption=
"Northern Lights"
src=
"lights200x100.jpg"
>
<
/a
>
<
/li
>
<
/ul
>
嘗試一下 ?
網(wǎng)頁名稱：創(chuàng)新互聯(lián)Foundation教程：Foundation圖片
轉(zhuǎn)載注明：http://www.dlmjj.cn/article/dphchdc.html
