Salvattore se prezintă ca o alternativă jQuery Masonry cu o diferență importantă: utilizează configurația CSS în loc de JavaScript. Aceste tipuri de grile pot fi văzute pe tot cuprinsul webului, probabil cel mai faimos pe Pinterest.
Astăzi, vom folosi Salvattore în combinație cu Twitter Bootstrap 3 pentru a realiza o structură de rețea grilabilă.
În primul rând, va trebui să luați biblioteca JavaScript Salvattore (minificată sau sursă). Apoi, veți dori să conectați CSS-ul Twitter Bootstrap. În loc să descărcați și să găzduim propria noastră copie, vom împrumuta acest lucru direct de la BootstrapCDN de la NetDNA.
Salvattore + Bootstrap
Odată ce acest lucru este complet, sunteți gata să începeți să configurați Salvattore!
Apoi, veți avea nevoie fie de o foaie de stil externă, fie a etichetă în antetul dvs. Cea mai mare parte a muncii noastre se va face în foaia de stil.
Notă: trebuie să includeți tip
și rel
pentru Salvattore să funcționeze corect.
Twitter Bootstrap oferă o structură puternică și flexibilă a rețelei, care se concentrează pe interogările media de jos în sus. Să aruncăm o privire la un rând comun de coloane.
Veți observa în marcajul de mai sus modelul col- [dimensiune] - [numărul coloanei]
. Cu dimensiuni disponibile xs
, sm
,md
, și lg
, suntem capabili să setăm diferite dimensiuni ale coloanelor pentru diferite puncte de întrerupere fără a scrie anumite interogări media. Uitați-vă la acest exemplu care arată modul în care se schimbă coloanele la diferite lățimi ale ecranului.
Vom crea o rețea care rulează utilizând componenta panoului Bootstrap. Marcajul pentru a crea panoul este construit astfel:
Panoul fără titluConținutul panoului
Acum că avem piesele Bootstrap de care avem nevoie, o vom pune împreună cu Salvattore. Pentru moment, vom începe cu șase panouri goale; mai târziu, vom face tot dinamica pentru a oferi fiecărui panou conținut.
Pentru ca Salvattore să funcționeze corespunzător, containerul nostru de rețea are nevoie de o date-coloane
atribut. Iată cum arată acum marcajul nostru:
Panoul fără titluConținutul panoului
Apoi, vom merge la foaia de stil și vom adăuga următoarele etichete prin intermediul pseudo-elementelor:
Ecranul @media și (min-width: 1px) și (max-width: 767px) #columns [coloane de date] :: înainte de content: '2 .col-xs-6'; ecranul @media și (min-width: 768px) și (max-width: 991px) #columns [data-columns] :: înainte de content: '3 .col-sm-4'; ecranul @media și (min-width: 992px) și (max-width: 9999px) #columns [coloane de date] :: înainte de content: '4 .col-md-3';
Punctele de întrerupere pe care le-am ales pe hartă direct în interogările de la Bootstrap. Salvattore folosește::inainte de
pseudo-element și conţinut
atribut pentru a defini clasele coloanelor create, și apoi încearcă să împartă elementele în mod uniform în acele coloane.
Am păstrat lucrurile strict în CSS până acum, dar dacă doriți să mergeți la o distanță suplimentară, JavaScript poate oferi câteva avantaje.
Salvattore face lucrurile un pas mai departe, oferind funcții de adăugare. Cu aceste funcții și o conexiune la un API (folosim API Google Book pentru a trage în cărți de Ernest Hemingway), putem construi o rețea dinamică. Iată JavaScript pe care îl vom folosi:
adăugați funcția (titlu, conținut) // construiți / selectați elementele noastre var grid = $ ('# columns') [0]; var element = document.createElement ("div"); // construi html var h = '„; h + = '„; salvattore ['append_elements'] (grilă, [element]) item.outerHTML = h; $ .getJSON ("https://www.googleapis.com/books/v1/volumes?q=inauthor:Ernest+Hemingway&callback=?", funcția (data) $ (data.items) .each (funcția (i , carte) append (book.volumeInfo.title, book.volumeInfo.description);););„; h + = titlu; h + = '„; h + = '„; h + = conținut; h + = '„; h + = '
Notă: jQuery Necesar
Mai întâi vom crea un adăuga
care iau titlul și conținutul și le împachetează în marcajul panoului nostru. Apoi folosim salvattore ['append_elements'] (grilă, [element]]
pentru a adăuga elementul în grila noastră. În cele din urmă, rulați apelul AJAX pentru a trage datele dinamice.
Pentru ca aceasta să funcționeze corect, vom elimina tot conținutul din suportul de rețea.
Salvattore va completa coloanele pentru noi.
Marcajul nostru final arată astfel:
Cărți de Ernest Hemingway
Salvattore face crearea unor rețele dinamice de tip masonic foarte ușoare pentru cineva care nu cunoaște foarte mult JavaScript. Spunând că, cu o cantitate mică de JavaScript, crearea de rețele dinamice cuplate cu conținut dinamic este o briză. În cele din urmă, Bootstrap oferă o structură flexibilă de clasificare a claselor pentru a construi cu ușurință rețele pentru orice punct de întrerupere.