griglia di blocco di fondazione
griglia voluminoso per il contenuto pagina di condivisione: per esempio, una linea per visualizzare quattro immagini, non importa quale è richiesta la larghezza media dello schermo.
È possibile utilizzare il <ul> elemento più .small|medium|large-block-grid- num grid- num classe per creare massiccia griglia. num è il numero utilizzato per specificare la media:
Esempi
<Ul class = "small-block -grid-3">
<Li> <img src = " newyork.jpg" alt = "New York"> </ li>
<Li> <img src = " paris.jpg" alt = "Paris"> </ li>
<Li> <img src = " sanfran.jpg" alt = "San Francisco"> </ li>
</ Ul>
<Li> <img src = " newyork.jpg" alt = "New York"> </ li>
<Li> <img src = " paris.jpg" alt = "Paris"> </ li>
<Li> <img src = " sanfran.jpg" alt = "San Francisco"> </ li>
</ Ul>
Prova »
Un altro esempio, utilizzare il paragrafo:
Esempi
<Ul class = "small-block -grid-3">
<Li> <p> Basta un semplice testo di esempio ... </ p> </ li>
<Li> <p> Basta un semplice testo di esempio ... </ p> </ li>
<Li> <p> Basta un semplice testo di esempio ... </ p> </ li>
</ Ul>
<Li> <p> Basta un semplice testo di esempio ... </ p> </ li>
<Li> <p> Basta un semplice testo di esempio ... </ p> </ li>
<Li> <p> Basta un semplice testo di esempio ... </ p> </ li>
</ Ul>
Prova »
Visualizzare un diverso numero di formati differenti
Con l'aggiunta di più blocchi di griglia di diverse classi dimensionali può essere impostato per visualizzare un numero diverso di blocchi:
Esempi
<Ul class = "small-block -grid-2 medio-block-grid-3 grandi blocchi-grid-4">
<Li> <img src = " newyork.jpg" alt = "New York"> </ li>
<Li> <img src = " paris.jpg" alt = "Paris"> </ li>
<Li> <img src = " sanfran.jpg" alt = "San Francisco"> </ li>
<Li> <img src = " newyork.jpg" alt = "New York"> </ li>
</ Ul>
<Li> <img src = " newyork.jpg" alt = "New York"> </ li>
<Li> <img src = " paris.jpg" alt = "Paris"> </ li>
<Li> <img src = " sanfran.jpg" alt = "San Francisco"> </ li>
<Li> <img src = " newyork.jpg" alt = "New York"> </ li>
</ Ul>
Prova »