Salvattore si propone come alternativa alla jQuery Masonry con una differenza importante: usa la configurazione CSS invece di JavaScript. Questo tipo di griglie può essere visto in tutto il web, probabilmente più famoso su Pinterest.
Oggi utilizzeremo Salvattore in combinazione con Twitter Bootstrap 3 per creare una struttura a griglia fluida e reattiva.
Innanzitutto, devi prendere la libreria JavaScript Salvattore (miniata o sorgente). Successivamente, ti consigliamo di collegare il CSS di Bootstrap di Twitter. Invece di scaricare e ospitare la nostra copia, la prenderemo direttamente da BootstrapCDN di NetDNA.
Salvattore + Bootstrap
Una volta che questo è completo, sei pronto per iniziare con la configurazione di Salvattore!
Successivamente, avrai bisogno di un foglio di stile esterno o di un file tag nella tua intestazione. La maggior parte del nostro lavoro verrà eseguita nel foglio di stile.
Nota: devi includere genere
e rel
attributi per Salvattore per funzionare correttamente.
Twitter Bootstrap fornisce una struttura di griglia potente e flessibile che si concentra su query multimediali di tipo bottom-up. Diamo un'occhiata a una fila comune di colonne.
Noterete nel markup sopra il modello di col- [dimensione] - [numero colonna]
. Con le taglie disponibili di xs
, sm
,md
, e lg
, siamo in grado di impostare diverse dimensioni di colonna per diversi punti di interruzione senza scrivere query multimediali specifiche. Dai un'occhiata a questo esempio che mostra come le colonne si spostano a diverse larghezze dello schermo.
Creeremo una griglia fluente utilizzando il componente del pannello di Bootstrap. Il markup per creare il pannello è costruito in questo modo:
Intestazione del pannello senza titoloContenuto del pannello
Ora che abbiamo i pezzi Bootstrap di cui abbiamo bisogno, metteremo tutto insieme con Salvattore. Per ora, inizieremo con sei pannelli vuoti; in seguito, renderemo tutto dinamico per dare ad ogni pannello un contenuto.
Perché Salvattore funzioni correttamente, il nostro contenitore di rete ha bisogno di un data-colonne
attributo. Ecco come appare attualmente il nostro markup:
Intestazione del pannello senza titoloContenuto del pannello
Successivamente, andremo al nostro foglio di stile e aggiungeremo le seguenti etichette tramite pseudo-elementi:
@media screen e (min-width: 1px) e (max-width: 767px) #columns [data-columns] :: before content: '2 .col-xs-6'; @media screen e (min-width: 768px) e (max-width: 991px) #columns [data-columns] :: before content: '3 .col-sm-4'; @media screen e (min-width: 992px) e (max-width: 9999px) #columns [data-columns] :: before content: '4 .col-md-3';
I punti di interruzione che abbiamo scelto mappano direttamente alle query multimediali di Bootstrap. Salvattore usa il::prima
pseudo-elemento e soddisfare
attributo per definire le classi delle colonne create, quindi tenta di suddividere gli elementi in modo uniforme in quelle colonne.
Fino ad ora abbiamo mantenuto la cosa rigorosamente all'interno dei CSS, ma se vuoi fare il massimo, JavaScript può offrire alcuni extra.
Salvattore fa un ulteriore passo avanti offrendo funzionalità aggiuntive. Con queste funzioni e una connessione a un'API (stiamo utilizzando l'API di Google Book per importare libri di Ernest Hemingway), possiamo creare una griglia dinamica. Ecco il JavaScript che useremo:
function append (titolo, contenuto) // build / seleziona i nostri elementi var grid = $ ('# colonne') [0]; var item = document.createElement ('div'); // crea l'html var h = ''; h + = ''; salvattore ['append_elements'] (grid, [item]) item.outerHTML = h; $ .getJSON ("https://www.googleapis.com/books/v1/volumes?q=inauthor:Ernest+Hemingway&callback=?", function (data) $ (data.items) .each (function (i , libro) append (book.volumeInfo.title, book.volumeInfo.description);););'; h + = titolo; h + = ''; h + = ''; h + = contenuto; h + = ''; h + = '
Nota: jQuery richiesto
Per prima cosa creiamo un aggiungere
funzione che prende il titolo e il contenuto e li avvolge nel nostro markup del pannello. Quindi usiamo il salvattore ['append_elements'] (griglia, [elemento])
funzione per aggiungere l'articolo alla nostra griglia. Infine, eseguiamo la chiamata AJAX per inserire i dati dinamici.
Affinché funzioni correttamente, vorremmo rimuovere tutti i contenuti nel supporto della griglia.
Salvattore riempirà le colonne per noi.
Il nostro markup finale assomiglia a questo:
Libri di Ernest Hemingway
Salvattore rende molto facile la creazione di griglie dinamiche in stile massoneria per chi non conosce molto JavaScript. Dicendo che, con una piccola quantità di JavaScript, la creazione di griglie dinamiche accoppiata a contenuti dinamici è un gioco da ragazzi. Infine, Bootstrap fornisce una struttura di denominazione delle classi flessibile per costruire facilmente griglie per qualsiasi punto di interruzione.