-
Foundation Kurs
- Foundation Kurs
- Foundation gestartet
- Foundation Text
- Foundation Tabelle
- Foundation Taster
- Foundation Button-Group
- Foundation Symbol
- Foundation Etikett
- Foundation Feld Erinnerung
- Foundation Ein Fortschrittsbalken
- Foundation Platte
- Foundation Bild
- Foundation Drop-Down-Menü
- Foundation Folding Liste
- Foundation Liste
- Foundation Tab
- Foundation Paging
- Foundation Listenpreis
- Foundation Top Navigationsleiste
- Foundation Sidebar
- Foundation Slide-Navigation(Off-Canvas)
- Foundation Magellan
- Foundation Form
- Foundation Eingangsrahmengröße
- Foundation Schalter
- Foundation Slider
- Foundation Ballon
- Foundation Modal Box
- Foundation Joyride
- Foundation Ausgleich
Foundation Gitter
- Foundation Verbundnetz
- Foundation Gitter - horizontal gestapelt
- Foundation Gitter - Kleingeräte
- Foundation Gitter - Mittelständische Ausrüstung
- Foundation Gitter - Großgeräte
- Foundation Blockraster
- Foundation Grid Beispiele
Foundation Referenzhandbuch
Das beste Foundation Fotos-Tutorial im Jahr 2024. In diesem Tutorial können Sie thumbnails,Fillet Fotos,Concise pop,Bildtext Beschreibung,Nur ein Thumbnail, lernen
Foundation Fotos
Stiftung bietet eine ansprechende Bilder, können Sie ein Miniaturbild Popups trinken zu erstellen:
Versuchen »thumbnails
In <img> Elemente außerhalb hinzufügen <a> Element Bild als Anker - Link.
In <a> Stichworte hinzufügen .th Klasse Bild als Thumbnails. Bewegen Sie die Maus an die Spitze eines hellblauen Rahmen erscheint:
Beispiele
<Img src = "paris.jpg" alt = "Paris">
</ A>
Versuchen »
 | Responsive Bild Image Foundation in Reaktion auf den Standardstil. Wir können Ihren Browser so einstellen, die Seitengröße im Beispielbild Zoom-Effekt zu sehen. |
|---|
Fillet Fotos
Wir können .th Klasse fügt .radius das Filet Klasse Thumbnail einzustellen:
Beispiele
<Img src = "paris.jpg" alt = "Paris">
</ A>
Versuchen »
Concise pop
Stiftung kann leicht Bild Pop erreicht werden.
Um ein Shell - Fenster in erstellen <ul> , um das Element hinzuzufügen .clearing-thumbs - Klasse und data-clearing - Eigenschaften. In der <ul> in der Liste der Bilder hinzufügen.
Hinweis: Das Bild Popups JavaScript benötigen. So muss es vor der Verwendung Foundation JS initialisiert werden.
Beispiele
<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>
<! - Initialisieren Foundation JS ->
<Script>
$ (Dokument) .ready (function () {
$ (Dokument) .foundation ();
})
</ Script>
Versuchen »
Bildtext Beschreibung
Sie können hinzufügen , data-caption auf jedem Bild Attribut der Beschreibung des Bild zu setzen:
Beispiele
<Li> <a href = "rock600x400.jpg" class = "th"> <img Daten caption =" Preikestolen "src =" rock200x100.jpg "> </ a> </ li>
<Li> <a href = "skies600x400.jpg" class = "th"> <img Daten caption =" Sunrise Skies "src =" skies200x100.jpg "> </ a> </ li>
<Li> <a href = "lights600x400.jpg" class = "th"> <img Daten caption =" Northern Lights "src =" lights200x100.jpg "> </ a> </ li>
</ Ul>
Versuchen »
| Tipp: Sie können in HTML - Elemente, wie zum Beispiel Daten caption = "<h2> Daten-caption Attribut hinzufügen Preikestolen </ h2> <p> In Norwegen </ p>" |
|---|
Nur ein Thumbnail
Wenn Sie erreichen müssen, wird eine Miniaturansicht nur angezeigt , wenn Sie <ul> verwenden .clearing-feature - Klassen und <li> Verwendung .clearing-featured-img - Klasse.
Beispiele
<Li> <a href = "rock600x400.jpg" class = "th"> <img Daten caption =" Preikestolen "src =" rock200x100.jpg "> </ a> </ li>
<Li> <a href = "skies600x400.jpg" class = "th"> <img Daten caption =" Sunrise Skies "src =" skies200x100.jpg "> </ a> </ li>
<Li class = "Clearing funktions -img"> <a href = "lights600x400.jpg" class = "th"> <img Daten caption = "Northern Lights" src = "lights200x100.jpg"> </ a> < / li>
</ Ul>
Versuchen »